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تكنولوجيا المعلومات والاتصالات 


مقدمة الكتاب 


عزيزي الطالب 

تنبع أهمية البرمجة من كونها منهجًا للتفكير وأسلويًا علميًا وعمليًا في حل العديد من 
المشكلات في القرن الحادي والعشرين الذي يطلق علية العصر الرقمي» وكونها أداة لتطوبر مفردات 
هذا العصر . 

ويعتمد المدخل الجديد لمنهج الكمبيوتر وتكنولوجيا المعلومات للصف الثاني الثانوي على 
تحقيق الأهداف العامة والأهداف الخاصة للمادة في ضوء وثيقة المنهج بما فيها من معايير ومؤشرات 
لهذا الصف» وذلك من خلال بناء المنهج على أساسيات المعرفة السابقة وتنمية مهارات التعلم الذاتي 
عن طريق تطبيق استراتيجية التعلم من خلال المشروعات» وهي إحدى الاستراتيجيات التربوية التي 
تنمي المهارات لدى المتعلمين عن طريق جمع المعلومات من مصادر متنوعة ومعالجتها واستخدامها 
في حل المشكلات من خلال عمل الفريق الواحد. 

ويتكون محتوى الكتاب الإلكتروني التفاعلي من عدة موضوعات تتكامل فيما بينها لتحقيق 
تلك الأهداف المرجوة» حيث يتناول الكتاب أريع موضوعات أساسية هي: إنشاء موقع ويب تفاعلي 
متكامل من خلال لغة الترميز ا1۲0 أو من خلال إحدى التطبيقات» وإنشاء قاعدة بيانات وريطها 
بالموقع بالإضافة لإجراء معالجة على البيانات التي يتم عرضها على صفحات الموقع وما يتبعه من 
تأثير في البيانات المخزنة في قاعدة البيانات من خلال كود أمأ٣٥8S»‏ وكل ذلك من خلال لغات 
برمجة مفتوحة المصدر ويرامج مجانيةء بأسلوب يتيح للمتعلم فتح آفاقا جديدة ورحبه تضعه على أول 
طريق توظيف ما يقوم بدراسته في حياته العلمية والعملية. 

وقد تم توفير الكود بالكامل للمتعلم لإنشاء صفحات الموقع بحيث يكون التركيز على اكتساب 
المعارف والمهارات الأساسية باللغتين العريية والإنجليزية وأن يكون تركيز المتعلم على فهم وتطوير 
أي كود ويطور مهاراته في البحث والتقصي عنها بالمكتبات أو من خلال الإنترنت» كما يتضمن 
الكتاب صورًا من واجهات التطبيق الفعلية المنفذة للمشروع لتوضيح جميع خطوات العمل وتبسيط 
المفاهيم لدى المتعلمين وكل ذلك من خلال أنشطة وتدريبات عملية. 

وأخيرًا فإن هذا الكتاب يحرص على تنمية المهارات الأساسية لدى الطلاب من خلال قضايا 
حياتية ليكون لديهم فرصًا يعبروا من خلالها عن إبداعاتهم ولتوضيح أهمية الكمبيوتر وتكنولوجيا 
المعلومات باعتبارها جزءَ من حياتهم اليومية. 


المۇؤلفون 


()"( الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 


مقدمة عن موقع 'قاموس مصطاحات الكمبيوتر المصور' 


إعداد جهاز الكمبيوتر الشخصي ۴٤‏ ليقوم بدور جهاز الخادم "5۷۴ 

الفصل الثاني: مراحل ومتطابات إنتاج مشروع 'قاموس مصطلحات الكمبيوتر المصور' 
المرحلة الثانية: إنشاء جداول قاعدة البيانات 

المرحلة الثالثة: مرحلة إنشاء صفحات الموقع 

إنشاء صفحة الاتصال بقاعدة الئبيlنlت Connection.php‏ 

المتغيرات والثوابت في لغة ۴۳4۲۴ 


إنشاء صفح '"Header.php"‏ 


IF Condition جملة الشرط‎ 


الفصل الثالث: إنشاء صفحات موقع 'قاموس مصطاحات الكمبيوتر المصور' 


إنشاء صفحة إدخال مصطلح ۲۳٥۲_)٤uمہ!‏ 
إنشاء صفحة البحث عن مصطلح 1ءإaمS‏ 
إنشاء صفحة حذف مصطلح 50e1٥٤٥‏ 


إنشاء صفحة تعدیل بیانات مصطلح ٤d٤‏ 


إنشاء صفحة المساعدة مpام١‏ 


Secure Web Sie بıو‎ عقaوم الفصل الرابع: تأمين‎ 


(") 
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ى 


أوّلا: تهيئة البيئة المناسبة لإنشاء الموقع 

ثانيًا: إنشاء قاعدة بيانات 

ثالتًا : كيفية إنشاء موقع وبب 

رابعا: كيفية جعل صفحة الوبب دnliıيك "Dynamic Web Pages'‏ 


خامسًا: استخدام أحد مستعرضات الإنترنت 


مفهوم الأخترlق‏ ¬ڼPenetrati0 .Concept of‏ 
طرق حماية مواقع الويب. 

بعض إرشادات تأمين موقع الوبب. 

أنشاء صفحة تسجيل مستخدم جديد. 

وظيفة النموذج .۴٠٥١۲۳١‏ 


الفرق بين ك۴ و ا66. 


مفهوم الجلسة ١0أءءم؟.‏ 

التحقق من صحة ١٥٤د‏ لاج۷ البيانات المدخلة. 
تشفير كلمة المرور. 

إنشاء صفحة تسجيل دخول ١‏ أوه!ا. 

تأمين قاعدة البيانات ا۵؟۷. 
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أهداف كتاب الكمبيوتر وتكنولوجيا المعلومات والاتصالات للصف الثانى الثانوى العام: 


(٤( 


تعرف بعض المفاهيم (قواعد البيانات- لغات برمجة أنشاء صفحات وبب-تأمين مواقع 
الويب- برامج مفتوحة المصدر -برامج مجانية......) والعمليات والبنية الأساسية لنظم 
الكمبيوتر . 

تعرف بعض المفاهيم والعمليات الأساسية لخدمات وتطبيقات تكنولوجيا المعلومات 
والإتصالات. 

يلم ببعض جوانب أمن المعلومات المتعلقة بإستخدام تكنولوجيا المعلومات والاتصالات 

يلم ببعض جوانب الأمن الفكرى (الإنسانية والأخلاقية والاجتماعية) المتعلقة بإستخدام 
E e aS‏ 

يستخدم أدوات الإنتاج التكنولوجية (....-ا۴۶۳1۶85۵&-ا1۲۷) في دعم وتطوير تعلمه. 
ينتج أعمال ومشروعات ابدعية نسبيًا ( مشروع قاموس مصطاحات الكمبيوتر المصور) 
باستخدام العمليات والبرامج والأدوات التكنولوجية. 

يوظف أدوات الأتصال التكنولوجية في التواصل والتفاعل والتعاون مع الآخرين لدعم التعلم. 
يوظف أدوات الاتصال التكنولوجية في تبادل المحتوى والرؤى مع الآخرين. 

يستخدم المصادر التكنولوجية في التعامل مع المعلومات الإلكترونية. 

يستخدم الأدوات التكنولوجية في معالجة البيانات وتقيميها واعداد تقارير بالنتائج. 
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الوحدة الأولي 


أساسيات تصميم مواقع الويب 


فى نهاية الوحدة يتوقع أن يكون الطالب قادرًا على أن: 
-١‏ يوضح بعض المفاهيم والمصطلحات العلمية المتقدمة ذات الصلة بالكمبيوتر 
- يوظف برامج الكمبيوتر في تنفيذ مهام التعلم. 
۳- يوظف خدمات شبكة الإنترنت في عمليتى التعليم والتعام. 
-٤‏ يمارس عمليات البحث عن المعلومات الإلكترونية بكافة صورها المتاحه على أجهزة 
الكمبيوتر وشبكات المعلومات الموثوقة في حل مشكلة. 
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تكنولوجيا المعلومات والاتصالات 
مقدمة 

استمرارًا لما بدأناه في مقرر الكمبيوتر للصف الأول الثانوي» والذي تناولنا فيه العديد من المعارف 
والمهارات المتنوعة من خلال مشروع "أطلس العريي الإلكتروني"'٠‏ فإننا هذا العام -بإذن الله سوف نحلق بكم في 
آفاقِ جديدة وعالم مفتوح يحقق لكم المتعة والاستفادة والإبداع» وذلك من خلال تصميم وإانشاء موقع 'قاموس 
مصطلاحات الكمبيوتر المصور" باستخدام تطبيقات ولغات برمجة مجانية أو مفتوحة المصدر» والتي تعد الأكثر 
انتشارًا في كبرى الشركات والمؤسسات العالمية المتخصصة في تكنولوجيا المعلومات والاتصالات. 


وخلال الفصل الدراسي الأول نسعى معًا لإنتاج موقع 'قاموس مصطلحات الكمبيوتر المصور" والذي يَعُد 
بمثابة قالب تستطيع من خلاله إدخال كافة المصطلحات لأي مادة دراسية أخرى بحيث يسهل عليك البحث عن 


الموضوع الأول 
مدخل معرفی للمشروع 
فى نهاية الموضوع يتوقع أن يكون الطالب قادرا على أن: 
-١‏ يتعرف بعض المفاهيم والمصطاحات الأساسية المرتبطة بإنشاء موقع ويب يتعامل مع قواعد البيانات. 
1- يميز صفحة الوبب الساكنة وصفحة الويب الديناميكية. 
۳- یمارس عملیات إعداد جھاز الکمبیوتر لیصبح جھاز .8٥٣۷٥۵۴١‏ 


-٤‏ يتعرف حزم برامج وتطبيقات الويب. 


أثناء تنفيذك مشروع 'قاموس مصطلحات الكمبيوتر المصور" ينبغي أن تتعرف بعض المفاهيم الاساسية 
الهامة التي سوف نستخدمها . 
١‏ -البرامج المجانيۂ FreeWare‏ 
هي البرامج التي يسمح مالك البرنامج الأصلي 'صاحب حق الملكية الفكرية" باستخدام برنامجه دون 
مقابل مادي أو إذن كتابي منه. 
۲ -البرامج مفتوحة ائأمصدر Open Source Programs‏ 
هي البرامج والتطبيقات التي تنشر ويسمح لمستخدميها بالاطلاع على الكود بحيث يمكنهم تعديل الكود 
وتطويره واعادة نشره أو استخدامه بعد التعديل في ضوء احتياجات مطوريها. 
۴۳ -صفحة الوبب ullكiة Static Web Page‏ 
هي صفحة المعلومات المتاحة على الإنترنت» والتي تعرض مختلف أنواع البيانات من نصوص وأرقام 
وصور وفيديو وجداول وارتباطات ... إلخ» وقد يصاحب بعض هذه البيانات تأثيرات معينة ويكون امتدادها 
ا۳٤‏ والصفحة التالية مثال أdغدحة :Static Web‏ 
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تكنولوجيا المعلومات والاتصالات 
EIS‏ 
Û‏ | وزارة التربهة والتعلبم 5© 1 > Û] DNsec 2 final 26-6-2015\projects.html‏ 
^ 


وزارة التربية والتعليم 
الإإدارة العامة للكمبيوتر التعليمي 


لاحظ امتداد الصفحة 


اأ دات الفو اح حوة 


بر مجيات بالمدينة التعليمية ب 6 أكتو د 


Static Web Page ۂiSlw شكل (1( صفحة وڀب‎ 
Dynamic Web Page ةıكيnliıدلl -صفحة الوبب‎ ٤ 

هي صفحة المعلومات المتاحة على الإنترنت» والتي يمكن أن تعرض مختلف أنواع البيانات» حيث يتم 
من خلالها إجراء معالجة على بعض محتويات هذه الصفحة وارجاع قيمة أو عرض رسالة أو ناتج» وتكتب 
الصفحة بلغة ۴۳٢۶‏ او 8۴.٣6٤‏ حیث تحتوی علی کود ینفذ علی جهاز الخادم 56۲۷۴۲ ومنها على سبيل 
المثال: 
تنفيذ اجراء معين بناءَا على مدخلات العميل مثل اسم مستخدم وكلمة مرور . 
٠‏ احتواء الصفحة على كود للتعامل مع قاعدة بيانات عند الخادم. 
ويمكن في بعض الأحيان معرفة نوع الصفحة من الإمتداد في عنوان الموقع الا 

والشكل التالي مJlû‏ ئة :Dynamic Web‏ 


لاحظ امتداد الصفحة 
ASPX‏ 


4 
ج‎ /@ http:// portal.moe.gov.eg/AboutMinistry/Departments/ecd/Pages/Default.asp¥ 02-C & الكعببونر النطیمی‎ 


File Edit View Favorites Tools Help 


il‏ ااا را ۶ خريطة الموقع | إتصل بنا | إخلاء السئولية | التکاوی | ۸کااوم۴ 
ونررا ا احم 


ممست با حم هاما 


عن الوزارة | أكاديمية المعلم | الإدارة الإلكترونية | الثانوية العامة | التعليم الإلكتروني | الإحصائيات والمؤشرات | الخدمات الالكترونية | المركز الإعلامي | خدمات المواطنين | 


EE Tr aN r اك‎ 


Dynamic web page Auli شكل (۲( صفحة ویب‎ 
Server oaدlخİl-‎ 


هذا المصطلح له معنيين: 
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تكنولوجيا المعلومات والاتصالات 
الأول: قد یقصد به جهاز کمبیوتر خادم 8۷2۲e S6۷۴۲‏ في شبکة کمبیوتر وهو جهاز یتمیز بمواصفات 
فنية عالية عن باقي أجهزة الشبكةء يتحكم في باقي أجهزة الشبكة وتحدد من خلاله صلاحيات مستخدمي شبكة 
الكمبيوتر بواسطة نظام تشغیل ال ٣۷۴٣اSe.‏ 
الأخير: يقصد به الدور الذي يقوم به جهاز معين في شبكة كمبيوتر »80۴fW۷4١١ 86۲۷6١‏ حيث نجد خادم 
الويب S6 ٣۷٠٣‏ (۷ يقصد به جهاز الكمبيوتر المخزن عليه صفحات موقع الويب» أو خادم الطابعة 
Print Server‏ ويقصد به جهاز الكمبيوتر المتصل به الطابعة بحيث يتحكم في إدارة عمليات الطباعة التي 
تصدر من أي جهاز آخر في الشبكةء أو خادم البريد الإلكتروني ٣ء۷إم$‏ ازج1 وهو جهاز الكمبيوتر المُخزن 
عليه رسائل البريد الإلكتروني ويتحكم في إدارة كافة العمليات المرتبطة بالبريد الإلكتروني ويتيحها لباقي أجهزة 
الشبكةء أما خادم قاعدة البيانات ٣إء۷إعS‏ م2sطهاه(‏ فهو جهاز الكمبيوتر المُخزن عليه قاعدة البيانات ويتحكم 
ويدير عمليات تعامل باقي أجهزة الشبكة معهاء .... وهكذا. 
٦‏ -سکربیت Sc!‏ 
كود يكتب بإحدى لغات البرمجة المخصصة لصفحات الونب لإجراء مهمة أو معالجة على بعض البيانات 
منها: 
Client Side Languages‏ مثل ۷B Scاiمtر لava Scrip ٤‏ و ينفذ هذا الكود داخل المستعرض 
بجهاز العميJ ."Run at Client"‏ 
Server Side Languages e‏ مثل P۲١۴‏ و ۸P .e٤‏ وبنفذ هذا الکود داخل جھاز الخادo Server‏ 


. "Run at Server' 


مثال : كود التأكد من عدم ترك حقل اسم المستخدم خالي يمكن عمله عن طريق أمأا٤؟ء‏ ۷هل 
(†lienاC Run at‏ ) أما كود التحقق من ان اسم المستخدم و كلمة السر صحيحة وهى الموجود في قاعدة 
البيانات بالخادم يتp‏ بكو .(Run at Server) ASP ڪİ PHP‏ 
۷-لغة الترميز أو lلتكyبد "Hyper Text Markup Language" HTML‏ 
هي اللغة المستخدمة في إنشاء مو۴" م۷ عاtه5t»‏ ويمكن حفظ هذه الصفحات بامتداد 
ا۳ط. ,۳ط. وتعرض من خلال أحد مستعرضات الإنترنت. 
"Personal Home Paged' PHP i-۸‏ 
إحدى اللغات المتخصصة في تطوير مواقع الوب الديناميكية» فهي لغة مفتوحة المصدر تتسم بالسهولة 
والسرعة وانها تعمل لدى الخاد م239 uو٬‏ ةا ١م54 56۷٥۴١۲‏ وتم تضمين الكود الخاص بها داخل كود 
كما نها تحتوي على مكتبات ودوال تسهل التعامل مع ملفات ا× وارسال واستقبال الملفات بواسطة 
بروتوکول ۴۲۳۴» كما يمكنها الاتصال بسهولة بقواعد البيانات المختلفة بأمان وحماية. 
وثحفظ الصفحات التي تحتوي على کود ۴۳۸۴ بامتداد ۴۳۴. ولتنفیذ کود ۴۳۹۴ نحتاج لإجراء بعض 
التعديلات اللازمة لجعل جهاز الكمبيوتر الشخصي جھاز خاد .Apache Server جanliرڊ مlختwlı erer‏ 
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تكنولوجيا المعلومات والاتصالات 
الويب بلغة ۴۳۴: 


Komodo © : % Wf aptana 
Komodo Edit 
leet Aptana Studio 3 


Komodo Edit 


Ê THE FREE HTML EDITOR 


Wndowa 


micros 


oft” _ِ 
EXPRESS SIOFT VNefn 


Website Name 


Expression web Coffee Cup Free HTML Editor 


شكل (۳) بعض التطبيقات المستخدمة في إنشاء صفحات وبيب 
۹-ڊرaliج Apache Server‏ 
يستخدم مع أجهزة ال 5٣۷6۴١‏ أو لتحويل جهازك الشخصي إلى جهاز خادم 56۲۷۴۲ بحيث يستطيع 
ترجمة الكود المكتوب بلغة ۴۳۴ وهو ما يسهل على مطوري مواقع الويب من اختبار صفحات الموقع محليًا 
على جهاز الكمبيوتر ۵1٥٥ا‏ قبل رفعه على الجهاز الضیف ۳٥٣5‏ ليتم نشره على الإنترنت. 
٠‏ 1- نشر مقع وڊپ Publishing Web Site‏ 
عند إنشاء موقع ويب نحتاج إلى تجرية صفحاته وعرضه على مستعرض إنترنت وذلك قبل أن يكون 
متاحًا لزيارته على الإنترنت» وتوجد طريقتان لنشر موقع: 
الأولى: محليًا ا١05‏ ا2ء ها حيث يتم عرض الموقع على جهاز الكمبيوتر الخاص بنا أو في شبكة محلية 
LAN‏ . 
الأخيرة: على الإنترنت م)ا؟S‏ ط٥۷‏ و”اطوءااطا۴ حيث يُرفع الموقع على جهاز خادم يسمى جهاز 
Hosting web ste‏ أو الجهاز المْضيف حيث يسمح للمستخدمين بزيارة الموقع من خلال عنوان خاص 
بالموقع يطلق leيa Web Address‏ و Resource Locator" URL‏ rmت‌nifل'‏ مثل عنوان موقع وزارۃ 
التربية والتعليم "9 .'www.em0e.0۲3.٥‏ 


)٩(‏ الصف الثاني الثانو ي 


تكنولوجيا المعلومات والاتصالات 
MYSQL Server -۹۹‏ 
هو أحد تطبيقات نظ_م إدارة قواععد البيانات العلائقي ةة R56 MS‏ 
."Relational Data Base Management System"‏ 
"Structured Query Language" SQL il -1۲‏ 
لغة برمجة تستخدم في كافة عمليات إدارة قواعد البيانات بدء من إنشاء قاعدة البيانات والتعامل مع 
البيانات المخزنة داخل الجداول التي تتكون منها قواعد البيانات من خلال كتابة جمل بسيطة (أوامر) تسمح 
بإجراء عمليات: 
8 إضافة بيانات جديدة .)IN5ERT(‏ 
إستعراض بيانات مخزنة من قبل .)6٤1٤٥(‏ 
۰ تعدیل ھذہ البیانات .)۷۴5۸۲٤(‏ 
حذف ھذہ البیانات .)D ٤۔٤۲ ٤(‏ 


1۴۳- حزم تطبيقات llوبب Web Server Pachages"‏ ' 
تشير حزم تطبيقات الويب إلى: 
تٹبيتٽت .(Apache Server) ڊıوزll al |nstall‏ 
٠‏ تثبيت ااهأد١!‏ نظام لإدارة قواعد البيانات (اهئلN).‏ 
ويتوفر على الإنترنت حزم تطبيقات ويب مجانية يمكن تثبيتها منها على سبيل المثال: 
١‏ - حزم تطبيقات ıgllب "Linux, Apache, MySQL and PHP" LAMP‏ 
وتشمل برنامج خادم الوب 56۲۷٠١‏ مطعءوم4. وتطبيق قاعدة البيانات ا5ل ومترجم لغة 
البرمجة P٥ ٣۴‏ وتعمل على نظا التشغیل ×ںاہاا. 
۲ - حزمة تطبيقات lئوبب "Windows, Apache, MySQL and PHP" WANP‏ 
وتشمل برنامج خادم الوبب 56۲۷٠۴١‏ مه١٣عودمه.‏ وتطبيق قاعدة البيانات )اه5 ومترجم لغة 
البرمجة ۴۳۴ وتعمل على نظام التشغيل dowsہ!N.‏ 
-٣‏ حزم تطبيقات ıgllب "Mac, Apache, MySQL and PHP" MAMP‏ 
وتشمل برنامج خادم الوبب 56۲۷٠۴١‏ مهء٣عودمه.‏ وتطبيق قاعدة البيانات )اه5 ومترجم لغة 
البرمجة ۴۳١۴‏ وتعمل على نظام التشغيل ع٤هaاN×.‏ 
< - حزم تطبيقات llئgڊب 'X-os, Apache, MySQL, Php , Perl" XAMPP‏ 
وتشمل برنامج خادم الوبب 56۲۷٥۴١‏ مهء٣عودمه.‏ وتطبيق قاعدة البيانات اه5 ومترجم لغة 
البرمجة ۴۳١۴‏ ولغة البرمجة ۴6۲1 وتعمل على أي نظام تشغيل. 
لاحظ أن الفرق الجوهري بين حزم تطبيقات الويب السابقة هو نظام التشغيل الذى تعمل معه. 
)١۰(‏ الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 
تدريب ١‏ "مفاهيم أساسية" بكتاب الأنشطة والتدريبات 


الموضوع الثاني 
تخطيط مشروع موقع 'قاموس مصطلحات الكمبيوتر المصور' 


فى نهاية الموضوع يتوقع أن يكون الطالب قادرا على أن: 
-١‏ يحدد المهام المطلوية لإنشاء موقع وبب. 
- يخطط الصفحة الرئيسية لموقع ويب 


۳- یمارس تحمیل برنامج ۳۲× لتشغیل تطبیقی ٤1e‏ 2مA‏ و .NYSQL‏ 


الهدف من المشروع 
تصميم وانشاء موقع 'قاموس مض طاحات الكمبيوتر المصور ' باستخدام تطبيقات ولغات برمجية مجانية 
أو مفتوحة المصدر . 


أهمية المشروع 
تكمن أهمية المشروع في تدريبك على كتابة كود ۴۳١۶‏ الخاص بالتعامل مع قواعد البيانات ا8۵/١‏ 
عبر صفحات موقع ویب 
وبذلك يمكنك -عزبزي الطالب- اعتباره نموذجًا يمكنك تطبيقه فى انتاج مواقع جديدة متنوعة الإستخدامات بعد 
إجراءك التعديلات اللازمة. 


تحديد المهام المططلوب تنفيذها فى مشروع إنشاء موقع 'قاموس مصطاحات الكمبيوتر 

المصور' 

ه تهيئة البيئة المناسبة لإنشاء الموقع. 

ه إنشاء قاعدة بيانات لحفظ بيانات قاموس المصطاحات التي يتم إدخالها أو تعديلها عبر صفحات 
الموقع. 

٠‏ تصميم الصفحة الرئيسة. 

٠‏ إضافة مصطلح باللغتين العربية والإنجليزية - التعريف العلمي للمصطلح - صورة تدل على المصطلح» 
وحفظها في قاعدة بيانات. 

ه البحث عن مصطلح داخل قاعدة البيانات. 

ه حذف مصطلح من قاعدة البيانات. 

٠‏ تعديل بيانات مصطلح في قاعدة البيانات. 


()۱۱١(‏ الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 
توفیر المساعدة اللازمة حول كيفية التعامل مع الموقع. 

الشاشة التالية تمثل نموذجًا مقترحًا للصفحة الرئيسة للموقع المطلوب إنشاؤه: 

EE) 


قاموس المصطلحات العصور [5] 4 - 2 http://localhost/dictionary/‏ 5 8 


شکل )٤(‏ مقترح الصفحة الرئيسة لموقع 'قاموس مصطلحات الكمبيوتر المصور' 
هل لديك مقترحات أخرى؟ 
ناقش زملائك ومعلمك فى مقترحاتك وامكانية تنفيذها. 
اجراءات إنشاء موقع ويب 
أولاً: تهيئة البيئة المناسبة لإنشاء 3 يلزم من تقنيات لضمان سلامة تشغيل الموقع› 
ن هذه الاعدادات والتقنبات التی يجب الاعتبار: 


e e 


. تحديد البرامج التي سوف تستخدمها في بناء مشروعك وتثبيتها ااة٤ئ١! على الكمبيوتر‎ )١( 

(۲) تحديد طريقة حفظ ملفات صفحات معلومات الويب كموجة۴ ط٥۷‏ الخاصة بالمشروع على جهاز 
کمبیوتر 'خادم" 86۲۷۴۲ » وامكانية عرضها على أحد برامج مستعرضات الإنترنت » وتحفظ هذه 
الصفحات في صورة ملفات على جهاز كمبيوتر 'خادم" 5۴۷۴۴ بإحدى الطرق التالية: 

(أ) بمقابل مادي على الإنترنت من خلال حجز موقع على أحد أجهزة استضافة مواقع الوبب " كه 
"Server‏ . 
(ب) بدون مقابل على أحد مواقع الإنترنت المجانية التي تسمح لك باستضافة موقعك. 
(ت) نشر الموقع محليًا على جهازك 'اكه۸ هع ها" وسوف نتبنى هذا الخيار -بإذن الله- في إنتاج 
مشروع 'قاموس مصطلاحات الكمبيوتر المصور'. 
© (ملحوظة هامة:) © يفضل وضع جميع الملفات الخاصة بالموقع في مجلد واحد يحتوي على مجلدات 
فرعية تضم الملفات ذات النوع الواحد معًّاء وأن تكون أسماء الملفات مختصرة ومعبرة عن محتواها وباللغة 
الانجليزية. 


5( الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 
(۳) إعداد جهاز الكمبيوتر الخاص بك ليقوم بدور جهاز الخادم المضيف للموقع 
:"Local Host"‏ 
عند إنشاء موقع ويب يحتاج مطوري البرامج إلى تهيئة البيئة المناسبة لإنشاء موقع الكترونى 'قاموس 
مصطاحات الكمبيوتر المصور" مما يستلزم جعل جهازك يعمل كجهاز خادم 56۲۷8١‏ وذلك باستخدام 
برنامج 56۲۷8۲ م"٣عهممA۸‏ الذي يقوم بترجمة الکود الزمکتوب "Personal Home Pages' PHP ail‏ 
واختبار الموقع على جهازك قبل نشره على الإنترنت أسوة بما تقوم به الشركات الكبرى. 


ولتجربة الموقع والتأكد من صحته محليًا قبل نشره على الإنترنت أسوة بما تقوم به الشركات الكبرىء تحتاج 
إلى تهيئة جهازك ليقوم بدور جهاز الخادم إمرإم؟ ليصلح لاستضافة الموقع. 
ومن امتا i‏ الرامج المنستخدمةه لها ال رض بر تامج '"<حpد0ة×‏ " 
يعتبر برنامج مم ”> من أفضل برامج إعداد جهاز الكمبيوتر ")ئ0 [هعه.["» فهو يتسم بالسهولة 
والقدرة على التعامل مع قواعد البيانات ا۲5SQ ١M‏ 
ثانييا: تنفييذمشروع موقع ا'قاموس مصطحات الكمبيوتر المصور' : 
وتمر بثلاث مراحل › هی: 
)١(‏ مرحلة انشاء قاعدة بيانات: تخزن فيها البيانات التي يتم إدخالها أو عرضها على صفحات موقع الويب» 
وذلك من خلال إحدى برامج إدارة قواعد البيانات مثل: ا۲541" - Ass‏ .... إلخ. 
(۲) مرحلة انشاء صفحة/موقع وبيب ساكنة كمود۴ ط٠۷‏ ءاه وذلك من خلال أحد الخيارين التاليين: 
6 lغة‏ llترjın ."Hyper Text Markup Language" H1IML‏ 
٠‏ استخدام برنامج جاھز او تطبیق Expression Web :جnliرڊ Jia Applicai0¬‏ 
لاحظ : 
الموقع الذي يتم إنشاؤه بإستخدام تطبيق أو لغة ا١1۲‏ يحتوي على صفحات ويب ساكنة 
"STATIC WEB PAGES"‏ تضم صورًا مختلفة من البيانات والمعلومات. 


(۳) مرحلة تحويل صفحة الويب الساكنة إلى صفحة ويب ديناميكي :"Dynamic Web Pages'‏ 
يتم فيها معالجة محتويات صفحة الويب الساكنة والتعديل في قاعدة البيانات المرتبطة بها بواسطة المستخدم 
المسموح له بالمعالجة والتعديل» وذلك من خلال كتابة كود بإحدى لغات البرمجة مثل: ۴۳۴ داخل كود 
.HIML‏ 
(٤)عرض‏ صفحات الموقع بإستخدام أحد مستعرضات الإنترنت: مثJل: Internet Explorer - Google‏ 
.ël}... Chrome ¬ Fire Fox‏ 


نشاط :١‏ إعداد جھاز الکمبیوتر لیصبح جھاز ٣۷م‏ بتثبیت [1ھ٤یہة‏ برنامج ''ppصa×"'‏ . 


Xampp 


۳( الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 
عزيزى الطالب/عزيزتى الطالبة لإنشاء مشروعنا بموقع "قاموس مصطلحات كمبيوتر مصور" 


علینا ما یلی: 
-١‏ إنشاء صفحات ساكنة "طWe ."Stat1c‏ وهو ما يتم من خلال تطبیق يمکن من خلاله عرض 


کڪود "Expression Web" Jقيبطت Jlûم "HTML"‏ 
1- معالجة محتويات الصفحات الساكنة "اع عء1اه)S"‏ لتصبح صفحات الموقع عنصج”ر5 » 
وذلك بإضافة کود بلغة "۶11P"‏ داخل كود "ل111" . 


۳- تشغيل برنامج ممه الذي يقوم ای 
تشغيل برنامج مهم م۸ والذى يجعل الجهاز يقوم بدور الخادم S۷۲‏ 


تشغيل برنامج N ۲۹5Q1_‏ والذى يمكن من التعامل مع قواعد البيانات 


وهو ما ستقوم بتنفيذه تحت اشراف معلمك »من خلال اتباعك لإجراءات الأنشطة الموضحة بكتاب 


الأنشطة والتدرببات 


(٠ ٤(‏ الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 
هة الثانية 
الوحدة - 


متطلبات ومراحل إنتاج المشروع 


فى نهاية الوحدة يتوقع أن يكون الطالب قادرا على أن: 

-١‏ يقترح مشروعات بسيطة لتوظيف تطبيقات وخدمات تكنولوجيا المعلومات والاتصالات في 
المجالات الحياتية والدراسية 

- يوظف تطبيقات تكنولوجيا المعلومات والأتصالات في تبادل مهام المشروعات 

۳- يوظف البرامج والتطبيقات المكتبية(جداول حسابية-قواعد البيانات) في إنتاج مهام محددة 
ضمن مشروعات تعليمية. 

-٤‏ يوظف عدة برامج لحل المشكلات التعليمية والحياتية. 

-٥‏ يصمم قاعدة بيانات مناسبة لمشروعه 

"- یمارس مهارات البرمجة بلغة ۲۳۴. 

۷ یستخدم بعض تطبیقات الانترنت فی مشروعه. 

۸- يصمم صفحات ويب تفاعلية خاصة بمشروعه. 

-٩۹‏ يريط صفحات الوبب التفاعلية بقواعد البيانات. 

--٠‏ ينتج مشروع باستخدام تطبيقات الانترنت المتقدمة. 

-١١‏ يوظف قواعد البيانات المتقدمة ( أاه0¥8S)‏ فى تصميم مواقع لحل مشكلة حياتية. 

-۲١‏ يستخدم لغة البرمجة ۴۳۶ فى انتاج برمجيات وموقع وبب للتعبير عن افكاره. 


۳- يقيم المتعلم مواقع ومصادر المعلومات من حيث الدقة والمصداقية في ضوء معايير 


)٠°(‏ الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 
عرزیزری الطالب والطالبة يمر مشروع إنتاج 'قاموس مصطاحات الكمبيوتر المصور ' بعدة مراحل اساسا هي ٠‏ 

-١‏ مرحلة تصميم صفحات الموقع 

-١‏ مرحلة إنشاء جداول قاعدة البيانات 

-٣‏ مرحلة إنشاء صفحات الموقع 

وكل مرحلة تتضمن عدة مهارات ومن خلال دراستك لها وتدرببك عليها يمكنك تنفيذ المشروع 

الموضوع الأول 

فى نهاية الموضوع يتوقع أن يكون الطالب قادرا على أن: 

1- يحدد الروابط اللازمة للإبحار بين صفحات الموقع. 

۴ يناقش مع زملاءه عة مقترحات أصفحات مشروع. 

مرحلة التصميم هى المرحلة الأولى من مراحل تنفيذ المشروع › وفيها يتم تحديد صفحات الوبب «واسمهاء 
ومحتواهاء والغرض من كل صفحة»ء ووضع تصور أو تصميم لمكونات الصفحة الرئيسة للموقع والارتباطات التي 


: تخدمها في التنقل بين فسات الموقع والعودة مرة أخرى للصفحة الرئيسة» والشكل التالي يوضح صفحات 


موقع 'قاموس مص طاحات الكمبيوتر المصور ': 


- 
HITT ۱ : : 1 


ل اضافة ۳ اند * ۳ 1 Or"‏ 1 احدة 


به المساعدة 
صفحة إدخال مصطلح صفحة المساعدة 
Help.php Add_Term.php‏ 
الصفحة الرئيسة 
Index.php‏ 
الصف الثاني الثانوي 


)۱١( 


تكنولوجيا المعلومات والاتصالات 


Del Term.php 


Edit_Term.php 


OEE 
Search_Term.php 


شكل )١(‏ مخطط لصفحات موقع قاموس 'مصطلحات الكمبيوتر المصور' 
الجدول التالي يعرض صفحات موقع 'قاموس مصطلحات الكمبيوتر المصور' والغرض منهاء وأهم الملاحظات 


عليها : 
سم لن 


البيانات 


Connection.php 


الموقع 
Header.php‏ 


صفحة إضافة مصطلح 


Add_Term.php 


e ۰ 


صفحة البحث عن 


ا 


Search_Term.php 


Edit Term.php 


Del Term.php 


تحقيق الاتصال بقاعدة البيانات» 
حيث يتم استدعائها قبل التعامل 


إظهار الصورة والارتباطات التي 
يتم استدعائها في بداية جميع 
صفحات الموقع. 

إدخال مصطاح وجميع بياناته في 
جدول المصطاحات بقاعدة 
البيانات. 


البحث عن مصطاح في جدول 
المصطلحات بقاعدة البيانات. 


a E 
المصطلحات با عدة البيانات.‎ 


A 
الم صطلحات با عدة البيانات.‎ 


لا تظهر هذه الصفحة أمام المستخدم وإنما تم 
فصلها لكي نكتفي بسطر كود واحد يحقق 
الاتصال بقاعدة البيانات في بداية كل صفحة بدلا 
من تكرار كود الاتصال بقاعدة البيانات بالكامل. 

هذه الصفحة تحتوي على الأجزاء الثابتة التي 
نحتاج لعرضها في جميع صفحات الموقع» لذا تم 
فصلها في صفحة مستقلة» وتستدعى بسطر كود 


واحد فى بداية كل صفحة. 


تعديل وحفظها. 


يمكن حذف المصطلح الذي تم اختياره. 


عادة مانجد في معظم المواقع صفحة 
sلا‏ اutطA‏ يعرض فيها معلومات عن الجهة 
التي يتبعها الموقع وطرائق التواصل مثل أرقام 
الهواتف والعنوان والبريد الإلكتروني والعنوان على 


الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 
م سس ]7 77 س 
| لإ موقم امل الاجتاعي 


تفعيل الارتباطات التي يمكن من | تمثل صفحة البداية التي تظهر للمستخدم عند 
خلالها الانتقال بين صفحات | تحميل الموقع» والتي من خلالها يمكن الانتقال 
الموقع. إلى باقيى صفحات الموقع. 


الصفحة الرئيسة 
Index.php‏ 


مرحلة التصميم الجيد للموقع قبل البدء في إنشائه يوفر الكثير من الوقت والجهد ويساعد على إنتاج موقع 
بشكل احترافي متمیز› 
وفى هذه المرحلة وبدراسة صفحات الموقع نلاحظ أن بها جزء ثابت لا يتغير وهو: 
٠‏ الصورة التي تظهر في بداية كل صفحة وتسمى 654۸۸6۲ 
٠‏ جميع الارتباطات التشعبية كم١أاا۴م‏ ل1 التي نستخدمها في الإبحار بين صفحات الموقع وهي: 
(الرئيسة - إدخال مصطلح - بحث عن مصطلح - تعديل - حذف - مساعدة)» 
وهذا يتطلب تكرار الكود الخاص بالصورة والارتباطات فى جميع صفحات الموقع وهو ما يمثل عبء كبير وتكرار 
ينبغي أن نتجنبه» وذلك بفصلها في صفحة واحدة يتم استدعائها في باقي الصفحات 
ويمكن حل هذه المشكلة ببساطة بإضافة صفحة باسم "مم "ea de۲.‏ تحتوي على ائصıررة «Banner‏ 
والارتباطات التتشعبية ء)٠ذا#م‏ ل1 "أسماء الصفحات أو الخدمات التي يتيحها الموقع'. 
والجدير بالذكر أننا نستطيع تنفيذ إنشاء صفحات الوب الخاصة بالمشروع من خلال العديد من التطبيقات أو 
البرامج الجاهزة بسرعة وسهولة» وسوف تدرس تلك المهارات فى المراحل التالية . 
بالإضافة إلى تحديد صفحات الموقع» علينا تحديد الهيكل البنائى لقاعدة البيانات»› 
وهو ما سيتم توضيحه فى المرحلة الثانية 


ندریب : تحلیل مخطط لموقع 
الغرض من كل صفحة ( اذكر اكبر عدد من الأفكار Cy‏ 


5 الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 
الموضوع الثاني 
إنشاء قاعدة البيانات 

فى نهاية الموضوع ينبغى أن تكون قادرا على أن: 

-١‏ يتعرف بعض المفاهيم الأساسية المتعلقة بقواعد البيانات. 

1- ينشىء قاعدة بيانات لمشروع قاموس مصطلحات الكمبيوتر . 

۳- يمارس عمليات الريط بين قواعد البيانات. 

-٤‏ يصنف العلاقات فى قواعد البيانات. 

-٥‏ يستخدم برنامج ا۸۲5 فى إنشاء قاعدة بيانات. 

- يتعاون مع زملاءة فى كتابة انشاء قاعدة البيانات بلغة البرمجة. 


المصور" وقبل البدء لابد من التعرف على بعض المفاهيم الأساسية الخاصة بقواعد البيانات. 


:Database البيانات‎ ةدعاق-١‎ 


قاعدة البيانات عبارة عن تخزين أو حفظ مجموعة من البيانات المنظمة والمرتبطة بموضوع معين بغرض 
استرجاعها لاتخاذ القرارات. وتعتبر قاعدة البيانات العلائقية ةل ا2 ه‌أهامR‏ احد آنواع قواعد البيانات 


التى تعتمد على تقسيم البيانات فى جداول 5٠اطةآ‏ مع تحديد العلاقات بين هذه الجداول. 


۲ -الجداول s٥اط1a‏ 


الجدول يمثل البنية الأساسية أو المكون الأساسى لقاعدة البيانات» ويتكون من سجلات 


وحقول ۴٠1۵45‏ مثل: جدول بيانات: الطالب أو الموظف أو المنتج...إلخ. 


حقول ds[ع‏ ۴1 


columns عمد‎ 


ل 
EN RET RE E‏ 
سب | | 
a ESTO E‏ 
ص | er‏ | 1 


EEE 


شکل )٦(‏ مثال لجدول طالب 
من الجدول بالشكل السابق نستنتج المفاهيم التالية: 


)۱۹( 


0 mm | 


«(Records 


سجلات 
Records‏ 
Rows‏ 


الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 


أً- السجلات :Records‏ 

عبارة عن صف بالكامل من جدول البيانات يحتوي على جميع البيانات الخاصة بشخص واحد فقط أو 
حالة وأحدة» ونتکون من عدة حقول مثل سجل بیانات (طالب أ موظف أو منتج معين) مثل سجل بيانات: 
الطالب مد أو الموظف سامح أو المنتج أو الصنف كمبيوتر ...إلخ. 


ب - الحقول كل|اء٥ا۴:‏ 
ويمثل الحقل البنية الأساسية التي يتكون منها جدول البيانات » أي عمود في جدول يمثل حقل ويحتوي 
على بيان واحد فقط لكل سجل من سجلات الجدول» . 
غل العديد من الخصا 
اسم الحقل ع۳١‏ 4 اع أ۴ مثل: اسم الطالب» اسم المحافظة»ء المرتب» الكمية ...إلخ. 
« نوع الحقل عممرآ لام۴ : قد تكون حقل نص9١‏ ٣5ء‏ مثل: الاسم أو العنوان »› حقل رقمى 
"n٤‏ مثل: درجة أو راتب موظف» وحقل تاريخ 028 » مثل: حقل تاريخ الميلاد وهكذا. 
" حجم الحقل S12‏ أ۴ وهو عدد الخانات أو الأحرففى حالة الحقل النصى » أو تحديد نوع الاقام 
المدخلة (صحيج |١96۲‏ - يقبل الكسر العشرى اك" أءمك - د ل قى اة الخقل 
الرقمى 
والجدير بالذكر أنه يمكن إنشاء قاعدة بيانات تحتوي على جدول واحد فقط يحتوى على جميع الحقول 
اللازمة وفي هذه الحالة يسمى هذا الجدول '٠اطه٣‏ اها۴". 
ولكن عادة ما نقوم بفصل الحقول التي يجمعها عامل مشترك في جدول واحد» وبالتالي تحتوي قاعد 
البيانات على أكثر من جدول. 
وهو الأمر الذي يتطلب إنشاء علاقات تربط جداول قاعدة البيانات ببعضها بحيث نتجنب تكرار إدخال 
البيانات أو الحقول» ويطلق عليها في هذه الحالة ا بیانات عîlئټıة ..Relational Database‏ 


E 


عملىة / 


)١(‏ تعيين حقل مفتاح أساسي لكل جدول يسمى ٥¥"‏ ل۲ة "آ٣۴"‏ وذلك بأحد طريقتين هما: 
ها ا ات د ولا ول د ت ر ای ا نے واھ 


٠‏ أو بإضافة حقل جديد يتم تعينه 'حقل مفتاح أساسي". 


ومنه يتضح MCE‏ کی کے کک ب TT‏ 
إضافة حقل جديد يقوم بدور مفتاح أساسي للجدول » وليكن رقم الطالب أو كود الطالب بحيث يخصص لكل 
طالب رقم خاص به يميز بياناته عن باقي سجلات الجدول. 


(۰( الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 
(۲) تحدید أنواع العلاقات sم!"s”هااهامR‏ في قواعد البيانات» ومفهوم كل نوع» وكيف يمكن الريط بين 
ولين»› 


۳- أنواع العلاقات في قواعد البيانات 
يوجد ثلاثة أنواع من العلاقات للربط بين جداول قاعدة البيانات: 
النوع الأول: علاقة راس برس One t٥ 0۸e‏ 
علاقة تربط بين جدولين بحيث يمكن أن يرتبط سجل في الجدول الأول بسجل واحد وواحد فقط من الجدول الثاني 
والعکس صحیح. 
متال (۱) 


جدول 'بيانات الطالب"' جدول احالة الطالب"' 


رقه” الاسم تاريخ الميلاد | الجنسية ‏ العنوان | التليفون رقم الصف 2 الحاللسة 
ا 
al n]‏ 
rl | r‏ 
KESEK‏ 
و اس مل سيه السین ]جمد | ]ا اک ا 


شكل (۷) يوضح العلاقة رأس برأس بين جدولين 
من الشكل (۷) نلاحظ أن الريط بين جدولين بعلاقة رأس برأس تتم بريط حقل المفتاح الأساسي في 
الجدول الأول 'رقم الطالب" مع حقل المفتاح الأساسي في الجدول الثاني 'رقم الطالب"» مع مراعاة أن حقلي 
المفتاح الأساسي في الجدولين لابد أن يكونا: 
)١(‏ من نفس نوع البيانات .Field Data Type‏ 
() نفس الحجم. 
(۳) نفس المحتوى. 
ولا يشترط أن يكونا نفس الاسم. 
يقوم تطبيق قاعدة البيانات بريط سجل رقم الطالب )١(‏ في الجدول الأول بسجل رقم الطالب )١(‏ في 
الجدول الثاني وهكذا لباقي السجلات حتي وإن كان إدخال السجلات في الجدولين بترتيب مختلف» المهم أن 
يكون محتوى حقلي الربط متماثلين . 


(۱( الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 


حقل أجنبي ۴٤‏ 
غير قابل للتكرار 
Index No Duplicate‏ 


شكل (۸) يوضح حالة أخرى لعلاقة رأس برأس بين جدولين 
من الشكل (۸) نلاحظ أنه يُحدد لكل فصل رائد واحد فقط من المدرسين» حيث يرتبط حقل كود المدرس 
(۶۴) في جدول 'المدرسين" بالحقل الأجنبي كود رائد الفصل (۴۸) في جدول 'الفصول" على أن يتم ضبط 
خصائص حقل كود الرائد غير lãبJ‏ lتكرار ."Index No Duplicate"‏ 
ملحوظة: يطلق على حقل كود رائد الفصل (۴۸) حقل أجنبي' ۴٥R٤16۸ ۴٤۲‏ لأنه ليس من طبيعة 
الجدول بل حقل دخيل عليه. 
النوع الثاني: علاقة رأس بأطراف One †٥ Nay‏ 
علاقة تربط بين جدولين بحيث يمكن أن يرتبط سجل في الجدول الأول بعديد من السجلات في الجدول 
الثاني والعكس غير صحيح. 


الصف 


ZK E 


شكل )٩(‏ يوضح العلاقة رأس بأطراف بين جدول "الصف" وجدول 'الطلاب' 


)۲( الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 
من الشكل )١(‏ نلاحظ الاآتي: 
ه العلاقة بين جدولي الصف" و 'الطلاب"' علاقة رأس بأطراف من ناحية جدول الصف» حيث نجد أن كل 
سجل في جدول "الصف" يرتبط به عديد من السجلات في جدول 'الطلاب" أي أن الصف الواحد يوجد 
به عدید من الطلاب في حين أن الطالب لا ينتمي إلا لصف واحد. 
ه للربط بين الجدولين في علاقة رأس بأطراف ينبغي إضافة حقل المفتاح الأساسي في جدول 0١6‏ وهو 
جدول "الصف" إلى جدول 3٣¥‏ وهو جدول 'الطلاب" ويسمى في هذه الحالة 'حقل أجنبي' ٣و‏ أه۲ه۴ 
¥ لأنه ليس من طبيعة الجدول بل حقل دخيل عليه. 
ه في الحقل الأجنبي يمكن تكرار البيانات (فى العلاقة رأس بأطراف). 
ه أن كل سجل في جدول الصف" يرتبط بعديد من السجلات في جدول 'الطلاب". 
يقوم تطبيق قاعدة البيانات بريط كل سجل في جدول الرأس "الصف" بسجلات الطلاب التي أمامها نفس 
رقم الصف في الحقل الأجنبي في جدول أطراف 'الطلاب'. 
النوع الثالث: علاقة أطراف بأطراف Many t٥ Nay‏ 
علاقة تربط بين جدولين بحيث يمكن أن يرتبط سجل في الجدول الأول بعديد من السجلات في الجدول 
الثاني» وسجل في الجدول الثاني بعديد من السجلات في الجدول الأول. 


جدول الصف 


رق | 
El 5‏ 
لصف 


حقلي رقم الصف ورقم 
المعلم معا مفتاح 
أساسي مركب 
composite key‏ في 
جدول الربط 


)۳( الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 


شكل )٠١(‏ يوضح العلاقة أطراف بأطراف بين جدول "الصف" وجدول المعلمين 
نلاحظ من الشكل )٠١(‏ الآتي: 
العلاقة بين جدولي 'الصف" و'المعلمين"' علاقة أطراف بأطراف» حيث نجد أن كل سجل في جدول 
O E O N OE OEE‏ 
يمكن أن يرتبط بعديد من السجلات في جدول "الصف" أي أن الصف الواحد يمكن أن يدرس فيه أكثر 
من مُعلم» وأيصًا يمكن للمعلم الواحد أن يقوم بالتدريس في أكثر من صف. 
قبل الريط بين الجدولين في علاقة أطراف بأطراف ينبغي إنشاء جدول جديد يحتوي على حقل المفتاح 
الأساسي في جدول الصف وهو ارقم الصف" وحقل المفتاح الأساسي في جدول المعلمين وهو 'رقم 
المعلم'» وأن يتم تعيين الحقلين معًا مفتاح أساسي في جدول الريط. 
العلاقة أطراف بأطراف هي علاقة نظرية في مفاهيم قواعد البيانات» ولا يمكن تمثيلها عمليًا في برامج 
قواعد البيانات. 
لذا تم تكسير العلاقة إلى علاقتين: 


الأولى: علاقة رأس بأطراف بين جدول الصف" وجدول الريط بحيث يكون الرأس هو جدول 'الصف' 
والأطراف من ناحية جدول الريط 

والثانية: علاقة رأس بأطراف بين جدول 'المعلمين" وجدول الربط بحيث يكون الرأس هو جدول 'المعلمين'. 
والأطراف من ناحية جدول الريط. 

لاحظ: 


* لا يمكن تكرار البيانات في حقل المفتاح الأساسي في جدول 'الصف 

٠‏ لا يمكن تكرار البيانات في حقل المفتاح الأساسي في جدول 'المعلمين 

٠‏ لا يمكن تكرار رقم معلم ورقم الصف معا في جدول الريط. 

ه٠‏ كل صف في جدول 'الصف" يمكن أن يدخله عديد من المطمين؛ وأيضًا أن كل معطم يمكن أن 
يدخل أكثر من صف دراسي. 


-٤‏ يمكن إنشاء قاعدة بيانات من خلال كود برمجة كما يلي: 


e 


استخدام لغة البرمجة ا5 في ۴۳١۴‏ وكتابة الكود الخاص بإنشاء: 
قاعدة البيانات بالأمر Create Database 08-1٤S1‏ ويشير الجزء المُظلل إلى اسم قاعدة 
البيانات. 
جدول بيانات بالأمر ٥5‏ ۲-eءاطة۲‏ ماطة۲ مtهaها€»‏ ويشير الجزء المُظلل إلى اسم جدول قاعدة 
البيانات. 
الصف الثاني الثانوي 


تر لوحا الطرمات والاتصاات 
٠ه‏ حقول جدول البيانات بالأمر ۷2١٤٣2١)15(‏ ه011-۸4۳ع. ويشير الجزء النُظلل إلى اسم الحقل 


-٥‏ استخدام أحد تطبيقات نظم إدارة قواعد البيانات مثل: ما0 أو sیمcءA MS‏ أو 


وسوف نبدأً أولى خطوات إنشاء قاعدة بيانات المشروع باستخدام )0۷۲8۵ لأسباب عديدة من أهمها: 

.Free Ware ڌıنilجم‎ lii 6 

.Open Source رjدصnأاl مفتوحة‎ 

تسمح بالتعامل مع كم هائل من البيانات. 

٠‏ تستخدمه كبري الشركات العالمية خاصة في مجال تكنولوجيا المعلومات مثل: Ya10٥0‏ ,اوم 
n4 Friend str‏ ولمزيد من المعلومات حول بعض الشركات التي تستخدم )ا1۷5۵ يمكن زيارة 
الموقع التالي: 


http: //www.mysql.com /customers / 


عادة ما تضم التطبيقات المستخدمة في نظم إدارة قواعد البيانات كائنات أساسية من أهمها: 

ه جداول 14۲165: من خلالها يمكن إنشاء جداول قاعدة البيانات بما تحويه من سجلات وحقول وامكانية 
إدخال بيانات فيها وعرضها وتعديلها. 

٠‏ استعلامات ١٠أ٣‏ 6ا 4: الاستعلام عباره عن سؤال يوجهه المستخدم لقاعدة البيانات فيعرض البيانات التي 
تجيب على هذا السؤال» ومن خلال الاستعلام يمكن عرض بعض حقول من جدول بيانات أو يعرض بعض 
سجلات من جدول أو آكثر بناءَ على شرط معين ...إلخ. 


لإنشاء قاعدة ببانات مشروع 'فاموس مصطلحات الكمبیوتر المصور' باستخدام تطبيق MYSQL‏ . اتبع 
اجراء ات نشاط 'إنشاء قاعدة بيانات باستخدام برنامج 0۷5۵1 " تاب الأنشطة والتدرببات ص 


بساعدك تنفيد هذا النشاط کا إنشاء قاعدة بيانات dbdictionary‏ باستخدام تطبيق/برنامج 
.MySQL‏ 

ويعتبر هذا النشاط مرشدا يمكنك تحت اشراف معلمك من إنشاء أي جداول أخرى في قاعدة 
البيانات حسب احتياجاتك. ۰ 
بالمواصفات التالية٠‏ 

مواصفات قاعدة بيانات المشروع : 

اسم قاعدة اليانات: ر٣ة«ه]اء1ل‏ ال » تحتوي جدول بيانات باسم كص ]ء1٠‏ يضم عدد (°) خمسة 
حقول كما هو موضح بالجدول التالي: 

(۳°) الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 


Table: Terms 


ملاحظة : تم انشاء قاعدة بيانات من جدول واحد للتبسيط وخصوصا عند البرمجة بلغة ۴۳١۲‏ 


الموضوع الثالث 
إنشاء صفحات الموقع 


فى نهاية الموضوع يتوقع أن يكون الطالب قادرا على أن: 
-١‏ يمارس خطوات إنشاء موقع بإستخدام تطبيق Expression Web‏ . 
۲- يتعرف لغة الترميز ل 1۲. 
۳- ينشیء صفحة ویب بکود ا 1۲. 
-٤‏ يشرح مكونات الشاشة الرئيسية برnliج Expression Web‏ . 
-٥‏ يريط بین صفحات الویب بکود ا 1۲. 
-٦‏ يتعرف لغة البرمجة .۴٣۲۴‏ 
۷- يوظف إحدى تطبيقات إنشاء مواقع ويب فى الريط بين صفحات موقع وبب. 


قبل البداً فى انشاء صفحات الموقع › علينا تنظيم الملفات التى سيتم عرضها على صفحات الموقع › 
والتي ينبغي أن تكون في مجلد واحد» حيث يحتوي هذا المجلد على مجلدات فرعية لجميع المعلومات والبيانات 
والملفات التي يتم عرضها على صفحات الموقع» مثل مجاد لملفات الصور ... إلخ. 

والجدير بالذكر آنه عند تثبيت برنامج 4٥‏ فقد تم تثبيته بشكل افتراضي داخل مجلد باسم 
2P‏ على مشغل الأقراص :0» ويه مجموعة من المجلدات منها مجلد باسم 140٥5‏ وينبغي إنشاء مجاد 
للمشروع باسم "ل3٣‏ !اا" داخل المجلد كعم ٤d‏ ليصبح المسار كما يلي : 

C:\xammp\htdocs\dictionary 

وهو المسار الذي سوف تستخدمه في حفظ جميع صفحات الموقع › وحفظ المجلدات الفرعية لجميع 
الملفات المتعلقة بالموقع. 
اجراءات اعداد ملفات ومجلدات المشروع: 

١-انشاء‏ موقع للمشروع وحفظه على جهاز الكمبييوتر داخل المجلد كعمل)" 


5( الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 
-١‏ انشاء صفحات الموقع 
ولإنشاء موقع من خلال تطبیق ا٤۷‏ 10۸٤م ٤×‏ › قم تحت اشراف معلمك بتنفیذ 
خطوات نشاط إنشاء موقع باستخد ام تطبیق Expression Web‏ الموضحه شی كتاب الانشطه 


والتدريبات 


ار اا دات ا ےب د ا نے ات خالا ور 
صفحات الموقعء 

٠‏ صفحة إدخال مصÛطlح 'Add_term.php"'‏ والتي تستخدم في إضافة مصطلح جديد. 

٠‏ صفحة البحث عن مصطzl Search_term.php"‏ وتستخدم في البحث عن مصطلح وعرض بياناته. 

صفحة تعدیل بیانات مصطلح ۲٥"‏ م.6۲۳)_اا۴۵" ومن خلالها يمكن تعديل أي بيان من بيانات 

. صفحة حذف مصطلح "م ٣م.e۲۳عا_اع0' ومن خلالها يمكن حذف مصطلح معين‎ ٠ 

ه صفحة المساعدة "م٣م.‏ ما٥1"‏ ومعلومات حول كيفية التعامل مع موقع 'قاموس مصطلاحات الكمبيوتر 
المصور . 

صفحة الاتصال بقاعدة ' Connection. ph‏ 

٠ه‏ صفحة '"م٣م.۲٠ل2٠1'‏ : تحتوي الصفحة على الصورة التي تظهر أعلى صفحات الموقع جميعها › 
وتحتوى الروابط بجميع صفحات الموقع» والجزء المخصص للتحقق من تسجيل دخول المستخدم على 
الموقع أم لا. 

ه الصفحة الرئيسة "مطم.×ه۵”١|:‏ واجهة استخدام الموقع › وتحتوي الروابط التي من خلالها يمكن 
الانتقال إلى باقي صفحات الموقع 

مما سبق نلاحظ: 

۵ه تم فصل كود الريط بقاعدة البيانات في صaiة .Connection. php‏ 

ه تم فصل جميع البيانات المشتركة في جميع صفحات الموقع في صفحة ڊwlم .'"Header.php"‏ 

.ا|ہل٥×.مم يمكن التجول/ الإبحار عبر صفحات الموقع من خلال الصفحة الرئيسة للموقع‎ ٠ 


نظرًا لخطورة عمليتي التعديل في بيانات المصطاح أو حذفه من الموقع › فقد تم منح هذه الصلاحية 
للمستخدم الذي يقوم بتسجيل دخوله فقط وهو ما ستقوم بتنفيذه فى مرحلة تأمين الموقع في الوحدة الرابعة 
من هذا الكتاب» وبذلك ينبغي على المستخدم الذي سجل دخول أن يقوم بتسجيل خروج من الموقع» وذلك بعد 
انتهاء تفاعله مع موقع 'قاموس مصطاحات الكمبيوتر المصور'. 


يعتمد إنشاء صفحات الموقع على استخدام لغة الترميز ا11 » لذا نتطرق الآن إلى أهم المعلومات والمهارات 
الأساسية في لغة الترميز ا1۲۷ وتطبيق ا٥۷‏ ١٥اءءهإم×ع)‏ للمساعدة على إنشاء صفحات الموقع 


(۲۷( الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 
لغ llترjın "Hyper Text Markup Language' HTML‏ 
لغة تكويد تستخدم في إنشاء صفحة ويب ثابتة تحفظ بامتداد .۸٤۳‏ أو .٤۳١١‏ بحيث يمكن عرضها 
وترجمة الكود الخاص بها من خلال أحد برامج مستعرضات الإنترنت. 
يمكن لكتابة كود )۳1۲۳ باستخدام أحد برامج معالجة النصوص مژJùل: MS Word, WordPad,‏ 
«Notpad and ......‏ 
مع مراعاة الآتي: 
ه الأمر الذي نكتبه بلغة الترميز ا٧1۲‏ يطلق عليها 9ه١.‏ ولا يشترط أن يكتب بحروف كبيرة اهاأمCa‏ 
أو صغيرة ااكة.S.‏ 
ه أن يكتب الكود وفق بنية محددة 


عنوان صعحه المعلومات 


لاطو دات التي اسا ا ) شي “ص حه مستعرض الانترنت 


شكل )١١(‏ يوضح الهيكل البنائي لبرنامج بلغة الترميز ا١1۲‏ 
خصائص لغة الترميز ا١1۲۸‏ 
)١(‏ الأوامر 95ه۲ في لغة الترميز ا1۲۷ توضع بين العلامتين: < >. 
(۲) معظم ال كوه٣‏ لها بداية أو فتح <.....> ولها نهاية أو إغلاق <...../> كما يلي: 


<Tag> 
النص الذي سيؤثر عليه الأمر‎ 


</Tag> 


شكل )١١(‏ الشكل العام لد وه٠‏ في لغة الترميز ا١1۲‏ 
مع ملاحظة الآتي: 
ه لكل 149 عمل معين يقوم به. 
ه كل ٠49‏ يكتب من اليسار إلى اليمين. 
ه < وها > بداية ال وaةا.‏ 
ه <29 ا /> نهاية ال وها . 
۵ بعض ۲۵95 ليس لها إغلاق أو نهاية. 


)۸( الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 
٠‏ بعض ال ك9ه۲ لها خصائص يمكن تعيينها معه فى بداية اأ وها. 
(۳) یبدا الکود ب <ا۳٤۳>‏ وینتھی ب <ا۳٤۳/>‏ وبینهما الآتی: 
</Head> <Head>‏ / ...إلخ. 


يختص بكتابة عنوان لصفحة الوب یظهر فی 83۲ ۲٣٤۲۴‏ لشاشة مستعرض 
</Title> <Title>‏ 1 ي 

الإنترنت وهو جزء من <لجءا"ا>. 

نضع فيه كافة أنواع المعلومات المراد عرضها على صفحة مستعرض 

الإنترنت من النصوص والتأثيرات التي تتم عليها والصور والفيديو والأصوات 


</Body> <Body> 
والجداول والارتباطات ... إلخ.‎ 


نهاية ال وها بداية الوجة۲ 
HTML>‏ /< جميع محتويات الصفحة <HTML>‏ 
<HEAD> <| HEAD>‏ 
<TITLE> </ TITLE>‏ 


<BODY> </ BODY> 
1۲۸۷1 ملخص الأقسام الرئيسة لكود‎ )١١( شكل‎ 
يشترط لحفظ كود ا1۲۷ في ملف مراعاة أن:‎ 
. .ہ٤ہا أو‎ .۸٤۳ یحفظ ملف کود ا۳۲ بأي اسم یکون امتدادہ‎ 
لأنه يحفظ الملف بهذا النوع مباشرة دون‎ 0٤03۵ نوع الملف .» ويفضل استخدام برنامج المفكرة‎ ٠ 
اختیار منا.‎ 


ا× ادا | TERE‏ 


HEADY awe ir: E ثد ربباٹ‎ > E | | E3 E 
LTITLE? 
ك‎ TITLE? 
HEAD? 
BODY 
ر‎ BODY 
F HTL * 


Fila nare: | Train .htrrf 
Save a3 pe: [Text Docurmen ts >[ LarnzEl | 


2 پچ پڪ 


(٩%‏ الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 
شكل )۱٤(‏ حفظ هيكل برنامج ا۳۲۸ المكتوب في برنامج المفكرة (24ةمء†٥١)‏ 
٠‏ بعد حفظ الملف بالمواصفات السابقة يأخذ الملف رمز مستعرض الإنترنت المتاح على جهازك مثل: 
Mozilla Firefox yÎ Google Chrome ڪÎ Internet Explorer‏ ... llخ.‏ 


.internet explorer Alla Jف‎ a يكون رمز الملف هو‎ 


نشاط ۲: "إنشاء صفحة ويب" باستخدام كود HTML‏ 
AOS‏ اتبع إجراءات النشاط بكتاب الأنشطة والتدريبات ص لاستخدام كود H1 ML‏ 


ناقش مع معلمك الجدول التالي الذى يحتوي ملخصًا للغرض من بعض أكواد ا1١1‏ المستخدم في النشاط: 


<Title> 
My First Web Page إضافة عنوان لصفحة مستعرض الإنترنت.‎ 
<| Title> 
<Body> كل نص يكتب في <لاله 8> يظهر على صفحة المستعرض» ناحية اليسار باعتباره‎ 
الاتجاه الافتراضي للكتابة على صفحة المستعرض. الكمبيوتر التعليمي‎ 
الكود <۴> فقرة جديدة. و'"ا#٤"٠٤' = ”واج خاصية تعني محاذاة النص التالي‎ 
.>/۴< لها توسيط على شاشة المستعرض إلى أن يُغلق ال وة۲ كما يلي‎ 
مصدر الصورة ويكتب بعد علامة "=" حيث‎ 'ا٣هوم‎ Source" تعني‎ img عا‎ 
واسم ملف الصورة بالامتداد.‎ ۴۵٤١ يشير إلى المسار‎ 
يقصد بها أن النص الذي يليها عنوان ويظهر بحجم خط حسب‎ '٠٠۵۵' تعني‎ 1 
إلى أكبر خط والرقم‎ ١ حيث يشير الرقم‎ ٦ إلى‎ ١ الرقم الذي يلي حرف 1 ويكون من‎ 
ه خط آقل حجمًا وهكذاء وتظهر عبارة 'تحيا مصر' أيصًا في منتصف السطر حيث أن‎ 


<۴> لم يغلق بعد. 


<۳1/> تحیا مصر <۱۸1> 


<p align = "right'> 
كتابة نص على صفحة المستعرض محاذاة يمين . الصفحة الثانية‎ 
</p> 
يمكنك عزيزى الطالب انشاء صفحة ويب باستخدام العديد من التطبيقات أو البرامج الجاهزة بسرعة‎ 
: وسهولة بدلا من كتابة أكواد ا1۲٧ واليك الطريقتين‎ 


وفيما يلى شرحًَا مختصرًّا لخطوات تحميلك تطبیق ا٤۷‏ ١٥1ءوءام‏ ×۳ على جهازك» لتوظيفه 


فى الربط بين صفحات الويب (نشاط ۳) 


أرّلا: من خلال إحدى تطبيقات إنشاء مواقع ويب 


یمکن تحمیل برنامج ٥٣ ۷٥۲‏ اءءم۲ام×E‏ لإنشاء مواقع وصفحات ويب من خلال واجهة تطبيق سهلة 
وبسيطة بدلا من كتابة أكواد ۸۲M)‏ من نافذة :S٤4٣٤‏ 


(۰ ۳( الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 


۳ Microsoft Expression 
Microsoft Expression Blend 4 
Microsoft Expression Design 4 
ت‎ Microsoft Expression Web 4 SuperPr| 
Microsoft Expressign Web 4 
۳ Microsoft Expressid 
۳ Microsoft Expresy 


ansaryNew ك‎ 


11 


شکل )٠١(‏ تحمیل تطبیق Expressio٠۸ Web‏ 
لتظهر الشاشة الافتتاحية للبرنامج والتي من أهم مكوناتها: 


اھ نے E‏ = 


Cixampp\htdocs\Dictionary - Microsoft Expression Web 4 


File Edit View Insert Format Tools Table Site Data View Panels Window H 


sS -EH#- i B§ 688 


Folder List # x Sie View Toolbox 


8 Contents of 'C:\xampp\htdocs\Pictionary' 
ê 
Fe 


lc: \xampp\htdocs Pictionary 
EH B .idea 
E Î complete 
E J images 
ıı JB up 
î Î Add_Term.php 
îî ask_to_sign_in.php 
î Î connection.php 
î Î Del_Term.php 
i Î Edit_Term.php 
a header.ohp 


Apply Styles 


| ooions > | 
5 


Select CSS .“vle to apply: 


Tag Properties 


o Folders Publishing Reports Hyperlinks 


C:\xampp\htdocs\Dictionary\.idea 


php 
php 
php 
php 
php 
php 
php 
php 
php 
php 
php 
php 
php 
php 
php 


شكل )١١(‏ مكونات الشاشة الرئيسة lڊرnliج Expression Web‏ 
شربط القرائ .Menu B321‏ 
نافذة قائمة المجلدات Folder List‏ . 


(1) 

(۲) 

.Tag Properties ضصفئأlصخlلl نافذة‎ )۳( 

.Web Sie مكونات موقع الوب‎ )٤( 

() نافذة صندوق الأدوات ×هطاهه۲. 

.Aممار‎ S؟اراء نافذة أنماط التطبيق‎ )١( 

وتتميز التطبيقات التي تستخدم في إنشاء مواقع وصفحات ويب بخاصية )W۷S|W۷۷6(‏ 
"What You See |s What You Get"‏ بمعنی: أن ما تراه هو ما تحصل علیهء کما یمکن عرض کود 
11 الخاص بصفحة الويب والتعديل فيه» فمثلا يمكننا استخدام التطبيق في الربط بين صفحتي الويب من 
خلال شربط الأدوات وذلك بعمل ارتباط تشعبي ”ذا#مل۳» على نص أو صورة بديّلا لكود ا1۲0 التالي: 


تكنولوجيا المعلومات والاتصالات 
<ة/> النص أو الصورة المراد ربطها بالعنوان <العنوان المراد الانتقال إليه' = >a ۲۲١‏ 

ثانيًا: في كود لغة الترميز 1 1۲۷. 

عزيزى الطالب والطالبةء بعد إنشاءك صفحتي ويب باستخدام لغة الترميز ا۳1M)›‏ تحتاج 
للتعديل في صفحتي الويب والربط بينهما من خلال نص أو صورة» وهو ما يمكنك تنفيذه بتعديل 
الکود فى lغة‏ llترمjı HTML‏ 
تحت اشراف معلمك قم بتنفيذ نشاط ؛ الذى يساعدك على الريط بين صفحات الويب في كود لغة الترميز 
HTML‏ 


نشاط :٤‏ الربط بين صفحات الويب في كود لغة الترميز HTML‏ 


كتاب الأنشطة والتدريبات ص 


'"Header.php' éةaفص إنٿاء‎ 


i * 


شكل (۱۷) صفحة 
ادرس الشكل السابق » وحدد الأجزاء المتكررة في جميع صفحات الموقع 
تحتوي هذه الصفحة على الأجزاء المتكررة في جميع صفحات الموقع كما -يتضح من الصورة السابقة- مثل: 
ه الصورة في بداية كل صفحة ويطلق leيlq Banner‏ . 
٠‏ النصوص التالية: الرئيسة - إدخال مصطلح - بحث عن مصطلح - تعديل - حذف مصطلح - 
مسأاعدة. 
ملاحظة هامة: النصوص السابقة تظهر على صفحة المستعرض مجرد كلمات غير مرتبطة بصفحات 
الموقع أي انها لم تصبح بعد روابط تûشعبıة „HYPERLINK‏ 
صفحة "1٠44۲.۸۳١"‏ تهدف باختصار إلى إدراج صورة ثم كتابة بعض النصوص التي تفصل بينها 
مسافات» كما يتضح من شاشة الكود التالية: 


"Header.php 


Site View header.php* x 


1 <html dir="'rtl'"™ 


2 <head> 

3 <meta content="text/ html; charset=utf-8" http-equiv="Content-Type"™™ 

4 </head> 

5 <body> 

6 <div> 

7 <img height='161' src—='images/banner.jpgs' width—='1267' > 

8 </div> 

3 <div style="width: 1256px;text-align:right" > 
10 &nbsp 
11 رسس‎ 
12Z Senbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp: 
13 إضاقة‎ 
14 &nbsp;&nbsp;&nbsp;:&cnbsp;&Scnbsp;&nbsp;&nbsp:; 
15 البحث عن مصطلتح‎ 
16 &Snbsp;:&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp:; 
2 حدذق مصطتح‎ 
18 &nbsp;&nbsp;&nbsp;&cnbsp;&nbsp;&nbsp;:&nbsp:; 
19 تعديل مصطتح‎ 
20 &nbsp;&nbsp;&nbsp;&cnbsp;&nbsp;&nbsp;&nbsp:; 
7 < div> 
23 </body> 
24 <html> 


Design Split Code 


)۳۲( الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 


1 


شكل (۱۸) نافذة كود صفaۂ 'Header.p hp"‏ 


نلاحظ فى الكود الذي تم إنشاؤه ما يلى: 
يستخدم ال 9ه التالى لإنشاء مقطع بالصفحة: 


كود ا۷١1۲‏ الخاص بهذا المقطع 


- القسم الأول: خاص بإدراج صورة B٣۴۲‏ من الملف 'ومز. 8۲٣٣ھ‏ ط/esوھصا'‏ مع ضبط خاصیتی 
الارتفاع والعرض. 


Untitled 1 (C:\xampp_new\htdocs\Dictionary\header1.php) - Microsoft Expression Web 4 اکا کر اکا‎ 


ا 3 = س ص - 


File Edit View Insert Format Tools Table Site Data View Panels Window Help 


Apply Styles 


EIS EEE 
Options 


select CSS style to apply: 


> XHTML10T 348 bytes | - El” css21 409x538 


شکل (۱۹) إنشاء صور إءر ,ھ8 وضبط خصائصها 
<d1V»‏ 
<img height='161' src=' images /banner.jpg' width='1267' />‏ 
<div> .‏ 
- القسم الثاني: تم ضبط بعض خصائصه من عرض ومحاذاة يمين» ثم كتابة اسماء صفحات الموقع» وترك 
بعض المسافات بالكود م5ط۸& وهو اختصار يعني '٥ءهaم5‏ ءاطاه)دماB‏ ٥ل"‏ ويفيد في ترك مسافة واحدة 
كما يظهر بالكود التالي: 


(۳"( الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 
<div style="width: 1256px;text-alen:right" =‏ 


&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 


&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 


&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp; 
حدق مصطظح‎ 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp:&nbsp; 
تعدبل مصطح‎ 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp; 
مساعنة‎ 

<divz 


شكل )٠١(‏ جزء الكود الخاص بعناوين صفحات الموقع 


كما يمكن إنشاء صفحة 'م۲م.de۲ھ٥٣'‏ بلغة الترمیز ا۳۳۷ أو أحد تطبیقات إنشاء صفحات ویب 
بالكود التالى: 


1 <html dir="rtl'"™ 


2 <head> 
3 <meta content="text'html; charsetuti-8" http-equiv="Content- Type" 
4 <head> 
3 <bodyz 
5 <divz 
7 <img helght='161' src='images/banner.jpg' width='1267' > 
8 <div> 
9 
10 <div style="width: 1256px;text-algn:right" > 
11 <a href="index.plp">ڏيسيئرلا=/aج‎ 
12 &nbsp;j&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
13 <a href="add term.php'"> & nbsp; إضافة مصطلح‎ 
14 <laz&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
15 <a href="search text.php"> glطصم <و/البحث عن‎ 
16 &nbsp;&nbsp;i&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp:; 
17 <a href="Del Term.php"> glطصم و حذف‎ 
18 &nbsp;&nbsp;&nbsp;i&nbsp;&nbsp;&nbsp;&nbsp; 
19 <a href="Edit Term.pip"> glطصم‎ Jيدعن‎ 
2 laz &enbsp;&nbsp;&nbsp;&nbsp;i&nbsp;&nbsp;&nbsp; 
21 <a href="Help.php">5 sla </a> 
22 < divz 
23 <body 
24 <html 


شکل (۲۱( كود إنشlء‏ صح Header.php‏ 
ونلاحظ فی كود ا۳۲ السابق ما یلی: 
)۱( تم فتح مقطع <۷> واغلاقه <1۷/> ووضع بينهما كود إدراج الصورة التي رغ ان کون 
Banner‏ یظھر في بداية جميع صفحات الموقع. 
)۲( المقطع الثاني يۇدي إلى عمل تنسيق محاذاة يمين لكل ما يليهء وحتی إغلاق المقطع» مع جعل 
النلصوص العربية ارتباطات ٣)‏ آ۴م ل۸ بصفحات الموقع. 
(۳) الكود التالي: 


5( الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 


<a href = 'index.php'> ۂuږيئرll‎ </a> 


يشير إلى: 
<مhpم.index'‏ = >a he۴‏ بداية كود إدراج ارتباط تشعبي بالعنوان وهو هنا "اسم الصفحة' 
الذي يلي علامة "=" والذي قد يكون اسم ملف أو اسم برنامج أو اسم صفحة ويب أو عنوان إنترنت 
...إلخ»ء ثم إغلاق الكود ب <ه/>. 
)٤(‏ مكطم& اختصار يعني "٥٤2م5‏ ماطa)aءماB‏ 0ل" وتفيد في ترك مسافة واحدة ولترك ست 
مسافات بعد كلمة 'الرئيسة" تم كتابتها > مرات يلي كل منها "' 
)٥(‏ وينفس الفكرة تستطيع عزيزي الطالب أن تكرر الكود السابق مع استبدال كلمة 'رئيسة" بنص "إدخال 
ا أبحث عن“ ثم نص 'تعديل مصطلح ثم نص حذف مصطلح ثم كلمة 
عدة" لیصبح کل منھا ارتباط تشعبیى 
والصفحة "م م. "Header‏ يتم استدعاؤها ا واحد بسيط في بداية كل صفحة من صفحات الموقع بدلا 
من تكرار الكود. 
بپ سنام برنامج EXPRESSION WE8‏ يمکكنك إنشاءِ صفحة 1٤۸2٤۸‏ بإدراج صورةء وكتابة 
بسض النصوص ندتهاء وأجراء بسطض اللسيات نليه تهر بشتل ملاسب. 
وهو ما ستقوم بتنفيذه تحت اشراف معلمك فی النشاط ٥ہ‏ "إنشاءِ صفحۂ .'٤AD€R‏ 
بكتاب الأنشطة والتدريبات ص 


Connection.php تlنlيبلإ إنشاء صفحة الاتصال بقاعدة‎ ٥-۲ 


و ت موقع "قاموس مص طلحات الكمبيوتر المصور'" إلى إضافة مصطلح أو تعديل 
بياناته أو البحث عنه أو حذف مصطلح من قاعدة البيانات» الأمر الذي يتطلب منا فتح اتصال بقاعدة البيانات 
کا EE‏ لنا اجراء هده العمليات کا بیانات قاعدة البيانات. 


عند إنشاء صفحة الاتصال بقواعد البيانات نحتاج إلى التعاممل مع متغيرات› 
وهو ما سنلقى عليه بعض الضوء قبل إنشاء صفحة الاتصال بقواعد البيانات: 


المتغيرات والثوابت في لغة ۴۴۳١۲‏ 
لقد تعرضت عزيزي الطالب في الحلقة الإعدادية لمفهوم المتغيرات والثوابت» والمفهوم لا يختلف عن ما 
سبق دراسته» ولكن دعنا نلق بعض الضوء من منظور لغة ۴۳1۴ فالمتغير عبارة عن مخزن في الذاكرة يحدد له 
اسم ونوع ويخصص له قيمة تخزن فيه» وتتغير قيمته أثناء سير البرنامج» فمثلا إذا كان المتغير $۲٥٤1‏ يساوي 
٠‏ فإنه يمكن تغيير القيمة التي تم تخصيصها بقيمة أخرى في لغة ۴٨۴۳ء‏ بجملة التخصيص التالية: 
$Total = 450;‏ 
نلاحظ الاآتي: 


)١(‏ الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 


يتم الاعلان عن المتغير عند استخدامه. 
أن اسم المتغير يبدأ بعلامة '$5". 
يتكون اسم المتغير من أحرف و أرقام وعلامة ' ' فقط مثل: $use۲_٣۵۳۴‏ - $۸123 - 
ŞPassword‏ .... . 
يفضل أن يكون اسم المتغير معبرًا عن محتواه أو ما يشير إليه. 
علامة التخصيص هي '='. 
تنتهي كل جملة في لغة ۴٣١۴‏ بعلامة "". 
لطباعة أي معلومات على صفحة المستعرض نستخدم ۴٣٤‏ أو ٤e٥‏ هكذا: 
print Ş$total;‏ - 
OR echo ("$total");‏ - 


كما أنه يمكن استخدام كود E٥1٥‏ لتجميع أكثر من ثابت أو متغير عند الطباعة على صفحة 


المستعرض وذلك بالفصل بينها بنقطة " . ". 
وهناك صيغة أخرى لطباعة قيمة المتغير كما يتضح من المثال التالي: 


$name="Mohamed'; 
echo "my name is $name'; 
echo 'my name is $name'; 


echo 'my name is ' .$name; 


عند تنفيذ الكود السابق تكون نتيجته على شاشة مستعرض الإنترنت كما يلي : 


my name is Mohamed 
my name is $name 


my name is Mohamed 


نلاحظ من تنفيذ الكود السابق ما يلي: 


0) 


في جملة الطباعة الأولى تم طباعة قيمة المتغير عند وضعها داخل علامتي التتصيص المزدوجة 
Double quotation‏ " ". 

بينما تم اعتبار المتغير بين علامتي التنصيص المفردة ١٥ا)ة)ماي‏ مءاو١!5‏ ' ' نص وطبع بالشكل 
التالي .my name is $name‏ 

في جملة الطباعة الثالثة تم استخدام النقطة لطباعة سلسلة حرفية وقيمة المتغير . 

يمكن استعراض بعض أنواع المتغيرات في لغة ۴۳١۴‏ من خلال الجدول التالي: 


الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 


3 


ه والجدير بالذكر أنه لا يتم الإعلان عن المتغير ونوعه في لغة ۴۳۹۴ وإنما يتعرف مترجم ac1۴مA‏ 
على نوع المتغير من خلال القيمة المخصصة للمتغير في جملة التخصيص. 

٠‏ فمثلا: تستطيع عزيزي الطالب معرفة نوع أي متغير باستخدام الدالة ;(5۷3۲) 0م96۲ وذلك بالكود 
التالي: 


<?php 
$U_name="mohamed'; || متغير يساوي قيمة حرفية‎ 
echo gettype($U_name); || طباعة نوع المتغير‎ 
echo "<br />'; /| النزول على السطر التالي‎ 


echo "Welcome to PHP'; // PHP طباعة رسالة ترحيب بغ‎ 


النزول إلى السطر التالي || ;'>/ echo "<br‏ 
طباعة نوع متغير آخر لم يتم استخدامه || echo gettype($test);‏ 
<2 


- نلاحظ أن ناتج تنفيذ الكود طباعة نوع المتغير ٠۳٣۵"_لا$‏ على صفحة مستعرض الإنترنت بأنه "و٣ "8)٣‏ 
ثم يترك سطر ويطبع رسالة الترحيب ۴۳١۴"‏ ه٥٤‏ ه٠۳٥ءاه۷.‏ ثم يترك سطر ويطبع ااا أي قيمة المتغير 
فارغ نظرًا لعدم تخصيیص قيیمه له. 

أما الثوابت فهي مخازن في الذاكرة تحمل اسم ونوع ويخصص لها قيمة ثابتة لا تتغير طوال تنفيذ 
O E E‏ 


define(' Constant Name", Value); 


Constant Name o‏ تشیر إلی اسم التثابت. 
ه عuا۷a‏ تمثل القيمة المخصصة للثابت. 
مع ملاحظة أنه لا يتم وضع علامة $ أمام اسم الثابت عند استخدامه. 
فعلى سبيل المثال: 
define('name', 'Mohamed');‏ 
echo('my name is: '. name);‏ 
٠ه‏ تستخدم النقطة (.) في سطر الكود الثاني لربط سلسلتين حرفيتين . 
٠‏ تم استخدام الثابت بدون علامة $. 
استخدمت كلمة ١٣۴1هل‏ لتعريف الثابت. 
e‏ ينتهي کل سطر في لغه PP‏ بفاصلة منقوطة (:). 


)۳۷( الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 
عند تنفيذ الكود السابق تكون نتيجته على شاشة مستعرض الإنترنت كما يلي: 
my name is: Mohamed‏ 
والجدير بالذكر أن المتغيرات والثوابت تتأثر بحالة الأحرف كبيرة أو صغيرة 
(ti۷۵اnsهءin-هءC4€))»‏ وإذا أردت أن يكون الثابت غير حساس لحالة الأحرف نستخدم الصيغة التالية: 
define ("Constant Name'", Value, true);‏ 
ومن الضروري التأكيد على الآتي: 
)١(‏ أن كود ۴۳۴ يكتب وفق الصيغة التالية: 


کود ۴۳٣٥۴‏ المراد تنفیذہ 


)١(‏ الكود مم?> يعلن أن الكود التالي عبارة عن ٤ء8‏ بلغة ۴۳۴ سيتم تنفيذه على جهاز الخادم 
.Apatche Server Jî ja‏ 
)۳( كود الطباعة على صفحة المستعرض في لغة ۴١۴‏ هو: 


Echo (‏ 
المحتوى المراد طباعته على صفحة المستعرض أو أي كود بلغة ۲۷1 ]ا 


J 


."" Si كل جملة في لغة ۴۳۴ لابد أن تنتهي بفاصلة منقوطة1 0اه‎ )٤( 
دون أن يترجم أو ينفذ يسبق بعلامة '//" أوء أما لكتابة ملاحظة أو‎ ۴۳١۴ كتابة تعليق داخل كود‎ )*( 
نص آكثر من سطر فيتم كتابة التعليق أو الملاحظات بالكامل مسبوقة بعلامة "*/" وفى نهاية‎ 
."*/" الملاحظة نضع العلامة‎ 
التی تحتوي على مصطاحات الکمبیوتر فی جدول ۴۴۳۶ء‎ 4٥41ء1٥‎ ٣3۲۷ بعد إنشاء قاعدة البیانات‎ 
من خلال صفحاته المختلفة إضافة مصطلح إلى قاعدة البيانات أو البحث عن مصطلاح أو تعديل أي بيان فيه أو‎ 
حدذدف مصطلح» وجميحع هذه العمليات بداية تحتاج ات إنشاء وفتح اتصال بین قأاعدة البيانات وصفحات الموقع»‎ 
وذلك قبل إجراء آي من هذه المعاملات» ومن هنا سوف نبدأً في إنشاء صفحة تحتوي على کود ۴۳۸۴ يحقق‎ 
الاتصال بقاعدة البيانات بحيث يتم استدعاؤها فى بداية كل صفحة ويب تقوم بإحدى عمليات التحديث فى قاعدة‎ 
البيانات.‎ 


)۸( الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 


connection.php™ x 


1 <?php 
2 
3 $username="root"; 
4 
5 $password=""; 
1 $database="dbdictionary"; 
9 $server="localhost": 
10 
11 $connect=mysql connect("$server","$username","$password"™); 
12 if ($connect) 
13 1 
14 $select=mysql select db("$database") or diٍع("تانايبلا ;("هناك مشكلة فى قاعدة‎ 
15 
16 else 
17 1 
18 :(""لم يتم الاتصال بقاعدة البياناث"')0طعع‎ 
19 1 
20 
I 


شكل (۲۲) كود صفحة الاتصال بقاعدة البيانات 


<?php 
هناك أريع متطلبات أساسية للاتصال بقاعدة البيانات هي: اسم المستخدم - كلمة المرور - اسم قاعدة‎ - 
البيانات - اسم جهاز الخادم.‎ 
$username="root'; 
$password=""; 
$؟use٥e۲۸2‎ ۳6٤ اسم مستخدہ ا۳۷5۹ یخصص للمتغیر‎ 
ويجب تغييرها كما سندرس في الوحدة الرابعة.‎ 5455۷0۲١ كلمة المرور الافتراضية " تخصص للمتغير‎ 
$database="dbdictionary'; 
$server="localhost'; 
$؟لةاهطaك٥ اسم قاعدة البيانات يخصص للمتغير‎ 
$؟5٥۲۷۵١ اسم الخادم "اكه ٣اهعه!ا" المُضيف لقاعدة البيانات يخصص للمتغير‎ 


$connect=mysql_connect("$server',"'$username'",'$password'; 


الغرض من الأمر السابق تخصيص ناتج تنفيذ دالة ٤6٣١٣هء_اهكل"‏ والتي تحتاج إلى المعطيات 
الثلاثة: (اسم جهاز الخادم المضيف» واسم المستخدم» وكلمة المرور)ء» في متغير الربط »$٥0١١6٥٤‏ حيث 
يكون ناتج الدالة "۲۴٠١۴"‏ إذا تم التحقق من صحة المعطيات الثلاثة السابقةء أو "5#اه۴' إذا كانت غير ذلك 
وللتأكد من ذلك نستخدم جملة ۴| التالية. 


if ($connect) 
الصف الثاني الثانوي‎ )۳۹( 


تكنولوجيا المعلومات والاتصالات 


$select=mysql_select_db('$database") or die 


;(أهناك مشكلة في قاعدة البيانات') 


:(الم يتم الاتصال بقاعدة البیانات') ٥۸ع‏ 
} 
الشرط يسأل عن قيمة المتغیر ٣٣٥٥٤‏ ٥ء؟$,‏ فإذا كانت "6د١٣"‏ فإنه يتم الاتصال بقاعدة البيانات 
المسماة #asمطهDat$‏ من خلال الدالة اك_٤ءءمامك_اوور"‏ أو عرض رسالة حال وجود مشكلة» من خلال 
الكود التالي: 


;("هناك مشكلة فى قاعدة البيانات") عاك ©٣‏ 
واذا كانت قيمة المتغير ٤٥٣٥ء‏ "ها۴" يعرض الرسالة التى تلى 8ا٠‏ على صفحة المستعرض 
بأنه 'لم يتم الاتصال بقاعدة البيانات'. 


5 الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 
الوحدة الثالثه 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


فى نهاية الوحدة يتوقع أن يكون الطالب قادرا على أن: 

١-يتعرف‏ أدوات التعلم الإلكتروني المعتمد على الانترنت 

-يوظف تطبيقات تكنولوجيا المعلومات والأتصالات في بناء محتوى تعلمه 

۴-يوظف التطبقات المناسبة في معالجة عناصر الوسائط المتعددة (صوت -فيديو -صورة ...). 
> -يطور المهام الإلكترونية التي يمكنه تنفيذها لدعم تعلمه. 

٥-يستخدم‏ تكنولوجيا المعلومات والاتصالات فى التواصل مع الخبراء فى المجالات المختلفة 
-يمارس مهارات التعامل مع المعلومات الإلكترونية (تحديد - تقييم - انتقاء - تنظيم). 
۷-يوظف المتعلم مصادر المعلومات الإلكترونية والمرتبطة بمشروع محدد. 


)٤١(‏ الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 
الموضوع الأول 
المعاملات والجمل الشرطية فى لغة۴١ ٥۴‏ 


فى نهاية الموضوع يتوقع أن يكون الطالب قادرا على أن: 

.۴ ٣۲۴ یمیز بین المعاملات ١٥٤ھا مم0٥ فی لغة‎ -١ 

۲- یشرح جملة الشرط 0 cond it'٥‏ ۴ا فی لغة P٣۴‏ . 

۳- يتعرف جملة Swi٤c۸‏ فی لغة .۴٣٣۴‏ 

. ؟Swا٤)ء18 يمارس الصيغ المختلفة لجملتی الشرط ۴ا‎ -٤ 

. Expression Web قJıڊطت‎ مlدختulڊ‎ Header ةiص ینش«‎ -° 


قبل البدء في إنشاء صفحة إضافة مصطاح يمكن أن نستعرض معًا مفهوم المعاملات ١0٤6۲۵م0»‏ حيث 
يوجد ثلاثة أنواع في لغة ۴۳١۲‏ وهي: 
)١(‏ معاملات حسابية بنوعيها (العادية - أخرى). 


مالل _| سيراي عة |[ ملق | لقال 


وهناك معاملات حسابية أخرى خاصة بلغة ۴٣١۲‏ 


rein Û Beme Û Meee 
a. 


ا 


5( الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 
)۲( معاملات مقارنة 


CIE EE E EIS 


eerie Enel f Greater Than Less Than 
Than Or Equal Than Or Equal 
Logical Operator معاملات منطيقة‎ )۳( 
Operator Û Name Û Result Tne Û Example | Result 
SISE TIERCE 
OR ا ايس أ‎ ORF e 
كلاالطرشي مەي و88‎ | Fe | Fee 
لصحي و0‎ TAND Fele Fe 
1 ا ا الطرقالين ضيح إل ا‎ 
IF Condition جملة الشرط‎ 
جملة الشرط ۴ء والتي يمكن من خلالها لمطوري البرامج وضع شرط معين واختباره فإذا كان ناتج الشرط‎ 
صحيكًا يقوم البرنامج بتنفيذ كود معين» وإذا كانت نتيجة تنفيذ الشرط غير صحيحة قام بتنفيذ كود آخر.‎ 
ويمكن استخدام جملة ۴| بصور متعددة حسب متطابات البرنامج» ولعل أبسط صورة تستخدم فيها جملة‎ 
هي:‎ ۴۴٣۲ في لغة‎ |۴ 


If (Logical Condition) 


{ 
الكود المراد تنفيذه إذا كان ناتج الشرط صحيحًا 


Condition‏ ا!اicaوها‏ تشير إلى تعبير شرطي مثل: 50 < اوم0 أو 6 > مھ أو 
.ël!... Name == 'Administrator'‏ 
فكما يتضح من الأمثلة وما سبق دراسته نجد أن الشرط يقارن بين متغيرين أو متغير وثابت بينهما إحدى 
E OD‏ 
وفي هذه الحالة يتم فقط تنفيذ الكود بين القوسين ' {) إذا تحقق الشرط. 
مثال: 


<?PHP 


$A="First'; 


(( الصف الثاني الثانوي 


تكتولو جا المعلومات والاتضالات 
If ($A==-"First')‏ 
{ 


;'أنت الأول" c٣٥‏ ع 


نلاحظ في المثال السابق: أن عبارة 'أنت الأول" ستطبع فقط على صفحة مستعرض الإنترنت إذا كانت 
فقط قيمة المتغير $۸ تساوي ٣5"‏ أ۴" كما نلاحظ أن علامة "=" في الكود )$۸=-"۴1١5٤;(‏ تمثل معامل 
تخصيص» أما علامة "==" مع جملة ۴ا تمثل معامل منطقي» وأخيرًا تذكر أن كل جملة في لغة ۴۳۴ تنتهي 
اا 
والصورة التالية لجملة ۴| هي الأكثر شيوعًا 
If (Logical Condition)‏ 


{ 
الکود المراد تنفیذه إذا تحقق الشرط ٣u٥‏ 


الكود المراد تنفيذه إذا لم يتحقق الشرط 


إذا فالطبيعي أن آي شرط قد تکون نتیجته "۲۲۴" فيتم تنفيذ الكود الخاص بتحقق الشرط فقط بعد ۴| 
مباشرة» وقد يكون نتيجة الشرط "٠5ا۴۵"‏ فيتم تنفيذ الكود التالي 1 ٥ءاع‏ فقط. 
مثال: 
<?PHP‏ 
$A="Second';‏ 
If ($A=='First')‏ 


{ 
;"انت الأُول' ٥٣cع‏ 


;"نت الثانی' ٥٣٥٤ع‏ 


(٤ ٤(‏ الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 
نلاحظ في المثال السابق: أن عبارة "أنت الأول" ستطبع فقط على صفحة مستعرض الإنترنت إذا كانت 
فقط قيمة المتغير $۸ تساوي "ا5٣۴"‏ وإلا سيتم طباعة عبارة "أنت الثاني" ونظرًا لأن '۵١٥ء‏ م5" =$۸ فإن 


الشرط لم يتحقق» بالتالي يكون ناتج تنفيذ الكود بالكامل طباعة عبارة "أنت الثاني" كما نلاحظ أن علامة "=" في 
الكود ($A="First';)‏ تمثل معامل تخصص › علاة "==' مح جملة If‏ تمثل معامل منطقي› وأخيرًا لاحظ 
ننا لم نضع ";' داخل کود ۴| بالكامل خم وا دة 


وهناك الصورة التالية الأكثر تعقيدًا لجملة ۴| 


If (Logical Condition) 


{ 
الكود المراد تنفيذه إذا تحقق الشرط الأول 


} 
Elseif (Logical Condition) 


{ 
الكود المراد تنفيذه إذا تحقق الشرط الثاني 


الكود المراد تنفيذه إذا لم يتحقق الشرط الثاني 


نلاحظ هنا أن جملة ۴| الأرلى يليها شرط إذا تحقق 2 الكود التالي لها مباشرة وإذا لم يتحقق 
فهناك شرط تان إذا تحقق ينفذ الكود الدي «Elseif‏ واذا لم يتحقق ينفذ الكود الذي يلي ه5اع» وبدء من 
۴| حتى نهاية الكود عبارة عن جواب عدم تحقق الشرط لجملة ۴| الأولى. 


مثال: 


$X=5; 
If ($X<0) 
{ 
ع٣٥ 'الرقم سالب'‎ 
} 


Elseif ($X>0) 
{ 
ع٤٣٥١ 'الرقم موجب'‎ 


5 الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 


'الرقم يساوي صفر ' ٥۸٥٤ع‏ 


} 


نظرًا لأن 5=×$ إذا فقد تحقق الشرط الثاني بعد ۴أ5#اع وسيتم طباعة عبارة 'الرقم موجب" على صفحة 
مستعرض الإنترنت . 
وهناك صيغة أخرى لجملة ۴| 
(Expression) ? If-True : If-False;‏ 
والمثال التالي يوضح استخدام الصيغة السابقة والتي یطلق علیہا ۴ ٥اا‏ ہ!ا: 
<?PHP‏ 
المتدر ياي $x = 1; | ١‏ 
$y = ($x = = 1) ? 'One' : 'Two';‏ 
يتم اختبار قيمة المتغير ×$ إذا كانت قيمته تساوي ١ء‏ يحفظ القيمة "0١٠"‏ في المتغير $۷ وإلا يحفظ القيمة "٥سا"‏ 


في المتغير $۷. 


طباعة قيمة المتغير || Print $y‏ 


نجد في المثال السابق أن (:) ٥1٥١‏ آدت إلى نفس النتيجة بدلا من استخدام الأقواس ‏ ). 
ثانيا: جaلA Switch‏ 

ويمكن أيصًّا استخدام جملة ٣ء٤أس؟‏ كأحد العبارات الشرطية في لغة ۴٣۴۳ء‏ حيث يمكن من خلالها 
اختبار عدة شروط وفي كل مرة يتحقق فيها شرط ما ينفذ كود معين» والمثال التالي يوضح ذلك: 


(٤٦(‏ الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 


<?php 
$x—=1: 
switch ( $x 7) 


case 1: 
echo :"و لحد"‎ 


س بے س 
| 


1 
3 
4 
3 
2 
5 
ي 
8 
1 
ا 


default: 


echo|_ =" |: 


break: 


شکل (۲۳) كود ۲۴۳١۲۶‏ يوضح استخدام الجملة الشرطية ط٤أس؟‏ 

وبتحليل الكود السابق نجد أن: 

فإذا كانت قيمة المتغير تساوي 1 آي :1 هع" يطبع 'واحد'٠‏ وهكذا لباقي الاحتمالات وفي آخر 
احتمال إذا لم تكن قمة المتغير لا تساوي ١‏ أو ۲ أو ۳ أي خلافًا لذلك يطبع "لا يوجد'. 

وهناك أمر آخر يمكن الخروج به دون تنفيذ شيء هو أمر ٤×٤‏ فمثلاً يمكن في آخر حالة ٤اuة؟هD0‏ 
نضع كلمة ۴×٤:‏ للخروج من جملة ١ء٤أس؟‏ بدلاً من طباعة "لا يوجد". 

هناك صيغة أخرى لجملة ٣ء٤اسS‏ حيث يمكن أن تأخذ أكثر من قيمة واحدة كما بالمثال التالى: 

<?php 
$a = 2: 


{ 


case Î: 


طباعة في حالة ول 
يساوی ۱ او ۲ او ۳ :2 case‏ 
CaASê 3:‏ 


:'واحد أو اثئين أو تاآئة' مآع 
break:‏ 


default: ٠ 
;'ارقام آخری' مآع‎ 


شکل )۲٤(‏ كود ۴۳١۶‏ يوضح صيغة أخرى لاستخدام الجملة الشرطية ط٤iس؟‏ 


7( ا الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 
الموضوع الثاني 
صفحة إدخال مصطلح Add_Term.php‏ 


فى نهاية الموضوع يتوقع أن يكون الطالب قادرا على أن: 
-١‏ يصمم واجهة صفحة إدخال مصطلح. 
۲- یکتب كود ۴٣۸۲۴‏ لتضمين صفحتی .Header & Con nec†i0°1‏ 
۳- ينشىء صفحة إدخال مصطاح. 
٤‏ يتحقق من إضافة مصطاح إلى قاعدة البيانات. 
)١(‏ تصميم واجهة صفحة إدخال مصطلجح 
من خلال إحدى التطبيقات المستخدمة في إنشاء صفحات الويب يمكن إنشاء صفحة إدخال مصطلح 
كما بالشكل التالي: 


آ کس کا 4 )C:\xampp\htdocs\Dictionary\Add_Term.php) - Microsoft Expression Web‏ ادخال مصطلح للقاموس 


File Edit View Insert Format Tools Table Site Data View Panels Window H 


B7 HNE-EHHH BEC GCO KBE” 2 E-wHFHLKE mM - © °7 5s FE 
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Right-to-left d 


Tag Properties # x Site View Add_Term.php* > Toolbox 

vw HTML 

v Tags 
<div> 


<span> 


| <body>| <form> 


add_term.php 
|multipart/form-data 
post 


Break‏ سے 

E Horizontal Line 
Fî Image 

# Inline Frame 
FF Layer 

¢ Paragraph 


v Form Controls 
EFT Advanced Button 
gj Drop-Down Box 
Form 
Group Box 
EJ Input (Button) 
Input (Checkbox) 
a Input (File) 
Input (Hidden) 
ة‎ F" Input (Image) 
... Browse || oo Input (Password) 
@ Input (Radio) 
قه‎ eû Input (Reset) 
eg Input (Submit) 
Input (Text) 
Label 
Design Split Code Ei ا‎ 


Drag margin handles to resize margins. Press SHIFT or CTRL for more options. B~” E ~ Irs 267KE M- Hr 


شکل )۲١(‏ شاشةۂ تصميم صفحة Add_Term.php‏ 
ن الشكل السابق يتضح الآ 
٠‏ كتابة عنوان شاشة الإدخال 'إدخال مصطلح' وقد تم وضع هذا العنوان في قسم مستقل <۷اك>. 
٠‏ وتستطيع عزيزي الطالب كتابة النصوص كما بالشاشة السابقة واستخدام نافذة الأدوات ٥×"‏ طا٥٣"‏ أعلى 
يمين الشاشة لإدراج عناصر التحكم على الصفحة. 


(٤۸(‏ الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 
ه النموذج ۴٠١۲۳‏ يستخدم لتمرير أو إرسال كافة بيانات النموذج الموجودة في عناصر التحكم من 
مستعرض الوبب إلی الخادہ ٥ e۷۴۲‏ ویوجد طریقتین 
رسال نات المر دج رها : ا 


<form method="GE["> -1‏ 
<form method="POST"> -1‏ 
حيث يمكن ضبط الخاصية "٥٤٣٥١4‏ للنموذج Form‏ 
بالقيمة ۴051 أو القيمة onc .٤‏ 
شکل )۲٣(‏ ضط خصائص النموذج ۴٥١۳١‏ 
واذا نظرت إلى كود "٤٣١١1‏ ستجد بداية ال ٠۵9‏ الخاص بالنموذج ۴٠١١۳۳‏ كالآتي: 


| <torm(qethod='post action="add_term.php' enctype="multipart/form-~data'> 


من الصيغة السابقة نجد العدید من خصائص النموذج ۴٥۲۳‏ حيث: 
- الخاصية كمطامM‏ يوجد لها معاملان إما المعامل 6٤۲‏ أو المعامل آ؟ك۴0. 
- الخاصية ١٠ء۸‏ ومعاملها اسم الصفحة التي يتم الانتقال إليها عند الضغط على زر اأ" طں؟. 


۵ بعص النصوص المُعبرة عل القيم المطلوب إدخالها في مریعات النصوص› مثل : نص 'المصطاح' وليه 
E E‏ 


مريح نص ع نأفدة مستعرص الإنترنت : 


<input name = "text_term'" type = "text' style = 'width : 482px" /> 


لاحظ فى الصيغة السابقة الآت: 
ہ الاما تعنی ادراج عنصر تحکم 
text_term 4anıul yii name = '"text_term' o‏ 
دە ×6" = مهملا تعنی نوعه مریع نص 
>×م482 : "width‏ = مارst‏ تعنى ضط خاصية العرض لمريع النص 
ه زر 'إضافة" المسئول عن تنفيذ الكود الخاص بإدراج بيانات المصطلح الجديد في سجل بيانات في قاعدة 
ائلبيlنات ."db_dictionary"'‏ 
٠‏ تم وضع باقي مكونات الصفحة في قسم آخر <۷ألك>. 
وللاطلاع على كود ا1۳ المقابل لصفحة إدخال مصطلح الموضحة بالشاشة السابقة قم بتحديد 
النموذج ۳۳٥۴ء‏ ثم اضغط زر "٥46"‏ اسفل نافذة البرنامج فيظهر الكود الخاص بهذا القسم محدداً كما 
بالشاشة التالية: 


تكنولوجيا المعلومات والاتصالات 


1 <html dir="rtl'"> 
<head> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type'"> 
۱ />ادخال مصطلح للقاموس<ع]|انا> اضف که د کہ‎ [< 
ا‎ <head> 
<body dir="rtl'"> 


div style=' text-align: center” > E 1 <رزل/><1ط/>!إدخال‎ 
E it" ="add term. .php" =" n ıltipa rUform-data'"'> 
="style2 "> 


"it term" 


= BH ile وآ‎ 


ا[ ا 


submit 


اضف كود pp‏ رقم ۲ 


23 </body> 
24 </html> 


شکل (۲۷) كود H1‏ ڏصة Add_term.php‏ 
انتبه الى الكود التالي: 


والذي يضم المعطيات الثلانة التالية: 

وهو أسلوب نقل البيانات من النموذج إلى الخادم ۴٠۷٣ه؟.‏ 

أ تحديد اسم الصفحة المراد الانتقال إليها عند الضغط على زر اأ" طن؟ك. 
MEPS‏ 6 تستخدم عندما يتم استخدام النموذج فى في رفع (الصور) على الخادم ٣ممك‏ 
وإذا لم يستخدم لا يتم رفع الصور داخل مجلد الصور 'ء¡۲". 


(۲) کتابۂ کود ٥۴۳٣4۲‏ 
عند هذا الحد نستطيع إدخال بيانات مصطاح في عناصر التحكم على صفحة المستعرض ولكنها بيانات 
غير مرتبطة بقاعدة البيانات» لذا نحتاج إلى: 
إظهار الصورة B٣۴۴‏ وعناوين صفحات الموقع في بداية الشاشة وذلك من خلال إضافة كود ۴۴١۴‏ 
الخاص بإدراج صفحة 1٠۴۵١٥۲‏ في المكان المشار إليه بالرقم 
)۱( على الشاشة السابقة بالكود التالي: <?php‏ 


imclude("header.php' 


شکل (۲۸) کود ۴۳٣۲‏ لتضمین صفحة ١۴٤ل2٥:‏ 
٠‏ تحقيق الاتصال بقاعدة البيانات. 
٭ النکن من ذخال انات فى كاضر التگم غل صفح السترض, 


(* °( الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 
ه تسجيل بيانات المصطلح في جدول قاعدة البيانات وذلك من خلال كود ۴۳۸۴ المرتبط بزر "إضافة" في 
المكان المشار إليه بالرقم (۲) على الشاشة السابقة بالكود التالى: 


<?php 
include("connection.php"); اضافة صفحة الاتصال بقاعدة البيانات‎ 
iflisset(S POST['Submit1'])) 


[ 
iflis dirf'pic)) { mkdirpic; } جملة شرطية لاختبار وجود مجلد عم وانشاؤه فى حالة عدم وجوده‎ 
@Sfle=$_FILES['File1"]['name'] ; 
@$tmp=$ FILES[File1'][tmp_name']; 
iflempty($file)) { move uploaded file($tmp,'pic/".$file); ? جملة شرطية لاختبار هل تم اختيار ملف صورة‎ 
$term=$ POST['txt term']; 
$trans=$ POST['trans']; 
$defe=$ POST['TextAreal']; 
$picture="pic/" . $file ." "; 
if ( $term 1 "" && $trans l= "" && $defe !=— "" && !empty($file) ) 
1 
mysql _query( "SET NAMES 'utf8'"); 
$query=mysql query( "insert into terms values(",'Sterm','$trans','$defe','$picture")"); 
if( query) 
{ 


;"ثم اضافة البياناث بنجاح"=وعإ)ول$ 
echo("label id= Label1' style='color: #FF0000:font-size: x-large; $datares </label> ");‏ 


else 


{ 
:"لم پتم اضافة الببائناتث"=وعإواول؟‎ 
echo( "label id='Label1' style='color: #FF0000;font-size: x-large; $datares </labelz "); 


;" الببانات النى تم إدخالها غير صحيحة يجب إدخال جميع الحثول"=وعواول$ 
echo("label id='Labell' style='color: #FFF0000;font-size: x-large; $datares </labe ");‏ 


شکل (۲۹) کود ۴۳١۲‏ لإضافة مصطلح جديد 


<?php 
تضمين صفحة تحقيق الاتصال بقاعدة البيانات بالكود التالي:‎ - 
include('connection.php'); 
Sub ٣|٤ التحقق من الضغط على زر‎ 
الكود التالي يختبر إن كان المستخدم قد قام بالضغط ءأا٤ على زر 'إضافة" فيتم التحقق أَرَلا من وجود‎ - 
مجلد باسم "ءام" وهو المخصص لوضع الصور الخاصة بالمصطلحات بداخله» فإذا لم يُنشأً هذا المجلد يتم‎ 
إنشائه.‎ 
if (isset(%$_POST['Submit1'])) 
{ 
if (!is_dir('pic')) { mkdir('pic'); } 


تكنولوجيا المعلومات والاتصالات 
- وبنفس الطريقة يمكن إنشاء مجلدات آخرى للصور أو الفيديو سواء بالكود أو من خلال نظام التشغيل في 
مجلد المشروع. 
رفع ملف الصور على 5٥۲۷٥۴١‏ 
- يخصص اسم الملف المختار من المستخدم 1١!اأ۴‏ إلى المتغير ٠اا‏ مع ملاحظة أن العلامة © تسمى 
۴it‏ وتتعامل معها لغة م٣۴‏ على أنها متغيرء ويفيد ذلك في عدم إظهار رسالة خطأً إذا كانت قيمته 
فارغة. 
@§file=$_FILES['File1'] ['name'];‏ 
@$tmp=$_FILES['File 1'] ['tmp_name'];‏ 


- اختبار إن كان اسم ملف الصورة غير محدد يتم تحميل ملف الصورة من مجلد 'ءام'. 
if (!empty($file)) { move_uploaded_file($tmp,'up/".$file); }‏ 
تخصيص قيم عناصر التحكم في متغيرات 
- يتم تخزين البيانات التي تم إدخالها في مريعات النصوص للمصطلح الجديد على صفحة المستعرض في 
المتغيرات التالية بالترتيب ( eإctu¡م$‏ - .)$term - $trans $defe‏ مع ملاحظة ان المتغیر $_۶٥0517‏ 
یخزن به قيم عناصر التحکم على التموذج ۴٠٥۲۳‏ عند الضغط على زر .Su( ٣"‏ 
$term=$_POST['txt_term'];‏ 
$trans=$_POST['trans'];‏ 
$defe=$_POST['TextArea1'"];‏ 
$picture="pic/" . $file . " ';‏ 
التحقق من إدخال قيم في عناصر التحکم على النموذج ۴٥۲٣١‏ 
- جملة ۴| التالية للتأكد أن هذه المتغيرات ليست خالية أي تم إدخال قيم فيهاء فإذا كان الشرط صحيحًا 
وجميع المتغيرات ليست خالية اا يقوم بتنفيذ الآتي: 
- استخدام دllة mysql_query‏ يساعد في إظهار البيانات على صفحة المستعرض باللغة العربية بشكل 


if (term !== " && $trans !== " && $defe !== " && 
!empty($file) ) 
{ 
mysql_query("SET NAMES 'utf8"); 


$query=mysql_query("into terms values (",'$term','$trans','$defe','$picture')'); 


Function ll آ۲ھbا1م الجدول‎ 


variable متٹغفیر‎ 


(°۲( الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 

- تم إنشاء متغير $۹٥۲۷‏ بحيث يخصص له قيمة تنفيذ الدالة yرامuه_اوءر"‏ التي تحتوي على جملة 1١5٠۲٤‏ الخاصة 
بلغة ا5 والتي تقوم بإدخال البيانات التي تم تخزبنها في المتغيرات إلى الحقول المناظرة لها في جدول قاعدة 
البيانات "١ك"۲۳ع6)'.‏ 

- ثم یتم التأكد من إدخال البيانات في جدول قاعدة البيانات 6٣۷(‏ 1۴)5۹ فإذا تم ذلك ظهرت الرسالة 'تم إضافة 
البيانات بنجاح' والا تظهر الرسالة 'لم يتم إضافة البيانات"'. 


if ($query) 
{ 
ا ووا‎ 
echo("<label id='Label1'" style="color: 
#FF0(0000;font-size: x-large;'> $datares </label> 
); 
} 
else 
{ 


;الم يتم إضافة البيانات"=5٥هd2aa$‏ 
echo('<label id="Label1' style="color:‏ 
#FF0(0000;font-size: x-large;'> $datares‏ 
</label> );‏ 
} 
} 
else‏ 
- في حالة عدم إدخال بيانات لجميع الحقول أو بعضها يطبع الرسالة 'البيانات التي تم إدخالها غير صحيحة 
يجب إدخال جميع الحقول . 


;'البيانات التي تم إدخالها غير صحيحة يجب إدخال جميع الحقول"-=5٠۲هaهل$‏ 
echo('<label id='"Label1' style="color:‏ 


#FF(0000;font-size: x-large;'> $datares </label> 
'); 
} 


2< 


(۴) الصف الثاني التانوي 


تكنولوجيا المعلومات والاتصالات 


عزيزى الطالب والطالبةء الآن يمكنك استخدام صفحة الويب كواجهة للتعامل مع جدول قاعدة 
البيانات لإضافة مصطلح جديد» وإجراء عمليات أخرى» وذلك من خلال تنفيذك نشاط :١‏ "إنشاء 


صفحة إدخال مصطلح م طم.٣۲ء)_‏ ۸11" بكتاب الآنشطة والتدريبات 
)۳( تنفيذ صفحة (دخال مصطلح 


عند استعراض صفحة إدخال مصطاح على مستعرض الإنترنت تظهر كما يلي» وذلك من خلال العنوان 
:localhost/dictionary/add term.ph‏ 


شكل )۳١(‏ نافذة استعراض صفحة إدخال مصطلح 


- في حالة عدم إدخال بيانات والضغط على زر 'إضافة" يطبع الرسالة 'البيانات التي تم إدخالها غير 
صحيحة يجب إدخال جميع الحقول" أسفل شاشة المستعرض كما يلي : 


و ره اطا 


البيانات التى تم إدخالها غير صحيحة يجب إدخال جميع الحقول 


شكل )۳١(‏ نافذة استعراض صفحة إدخال مصطلح بشكل خاطيء 


- عند إدخال جميع بيانات المصطلح كما يلي: 


e 


الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 


1 سے 
Xx | A, oke‏ ادخال مصطلح للقاموس http://localhost:8080/dictionary/add_term.php 2۸-G E‏ 6< 


Super Computer 


هاتل عستا ”شق الحماتات ف تستجدم: علج :خنطاق :حولي عبتي مكقه ^ 
ربط قنكة خاسنات الية كبيرة خجداً على تطظاق واضع .. ۷ 


| Browse... CIUsers\Public\PicturesiSample Pictures\isuper computer.jpg 


شكل (۳۲) نافذة إدخال مصطلح 


وبالضغط على زر 'إضافة" تظهر الرسالة 'تم إضافة البيانات بنجاح" أسفل شاشة المستعرض. 


<6 http://localhost:8080/dictionary/add_term.php 
۸ 


ان ننا 
Om x‏ 


0 < © ادخال ممطح للقاموس [5&] ًإ‎ «< Kg E 


Browse... 


تم اضافة البيانات بنجاح 


شكل (۳۳) نافذة التأكد من إدخال مصطلح بشكل صحيح 


> 


)٥°(‏ الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 
)٤(‏ التأكد من إضافة المصطلح إلى قاعدة البيانات 

ولاتأكد من أنه تم إضافة البيانات فى سجل جديد في قاعدة البيانات» نفتح قاعدة البيانات في تبويب 
جديد لمستعرض الإنترنت بكتابة الرابط التالي "٣"‏ كy2"مام/stمم‏ اعا" في شريط العنوان ونتأكد من 


إضافة سجل جدید فی جدول "'۶٣۲۳ع)":‏ 


€ DJ) 4 http://localhost:8080/phpmyadmin/tbl_row_action.php#PMAURL-0:tbl_row_acti © 7 @ 


X Find: a oy Previous Next 2 Options wv | 
phpMyAdmin Server: 127.0.0.1 » ® Database: dbdictionary » ® Table: terms 


^l G 60) € lı] Browse # structure |] SQL | Search Fé Insert | Export >} Import YW More 
Recent Favorites 


ığ New 
+ i cdcol 
-| ı ıl dbdictionary 
gd New 
+1 j4 terms 
+ j4 users 


£4 localhost:8080 / 127.0.0.1 / ... X | 


SELECT * FROM ` terms” 


[_lProfiling [ Inline ] [ Edit ] [ Explain SQL ] [ Create PHP Code ] [ Refresh ] 
+1 „| information_schema 
bg mysql Number of rows: | 25 
| performance_schema 


| phpmyadmin + Options 


Filter rows: Search this table | 


4 مآ‎ ¥ id term trans defe 


| webauth O ZA Edit Fé Copy @ Delete 6 | Super کمبیوتر نى إمكاتيات هائلة جدآ يستخدم لتخزين الكمبيوتر‎ | pمic/super_computer.زpg‎ 
Computer الحملاق‎ j 


.ومعال 


picture 
1 [_] Check All With selected: #9 Change @ Delete  [@ Export 


Number of rows: 25 Filter rows: | Search this table | 


Query results operations | 


@} Print view Û) Print view (with full texts) [reh Export jjj Display chart [¥] Create view 


شكل )۳٤١(‏ نافذة التأكد من إضافة المصطلح في جدول قاعدة البيانات 


)°١(‏ الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 
الموضوع الثالث 
صفحة البحث عن مصbطlح Search_term.php‏ 


فى نهاية الموضوع يتوقع أن يكون الطالب قادرا على أن: 
1- یشرح عبارات التکرار EES ESED ESS‏ 
1- يصمم واجهة صفحة البحث عن مصطاح. 
۳- یکتب كود ا۳۲۳ لإنشاء صفحة البحث عن مصطلح. 
-٤‏ يكتب كود 1۴۲P‏ ۴لتضمين صفحتىy .Header & Connecti0°¬‏ 
-٥‏ یتعاون مع زملاءه فی کتابة کود ۴۳۴ للبحث عن مصطاح. 
-٦‏ ينفذ عمليات البحث عن مصطلح. 


قبل إنشاء صفحة البحث عن مصطلح ينبغي أن نلق الضوء على مفهوم التكرار و٣‏ أم ٥٥ا‏ وبعض 
عبارات التكرار في لغة ۴٢۴۳ء‏ حيث نحتاج أحيانًا في بعض البرامج إلى تكرار كود معين عدة مرات أو تكراره 
لحين تحقق شرط معين» هنا نجد أن لغة ۴۳۹۲ توفر لنا بعض عبارات التكرار مثل: 50 While - For‏ 
6¡ وفيما يلي نضرب بعض الأمثلة التوضيحية لاستخدام عبارات التكرار السابقة في تطبيقات بسيطة: 
)1( جlaة While‏ 
استخدم جملة ها۷ في كتابة كود يطبع الأعداد من ٠٠١ : ١‏ بلغة .۴۴۳١۲۴‏ 


<?PHP 
$x = 1; || ١ متغير يبدا بالقيمة‎ 
While ($x <= 100) // تنفذ جميع الأوامر في جملة التكرار‎ 
والتي تظهر بين القوسين  ) طالما أن الشرط صحيح‎ 
.٠٠١ أي أن قيمة المتغير ×$ أقل من أو تساوي‎ 


{ 
طباعة قيمة المتغير || Echo ($x);‏ 
النزول إلى السطر التالي || Echo ("<Br>'");‏ 
زبادة العداد أو المتغير بقيمة٠‏ || ;++ $x‏ 
ويمكن كتابة هذه الجملة بالصيغة ;1 + ×$ = ×$ 


نلاحظ من الكود السابق مدى الاختصار والبساطة فى طباعة الأعداد من ٠٠١ : ١‏ وهو ما يوفر 
طباعة ٠٠١‏ جملة لطباعة الأعداد على شاشة المستعرض بالطريقة التقليدية. 
(۷) الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 
php‏ 


ارم راچود ع1 = برچ 


$ EOL = O2 رقي وض‎ 

srhilE) xX 4= 10U 3 

1 
SLEOLCaAl = $LOLCAl + Fx? 
2z: + 

٣ 

echo " je mتaانلا م"‎ 

eCrhOo "TZpFm r; 

echo $LtorlCal; 


شکل )۳١(‏ کود ۶۳۴ لاستخدام جملة التكرار عا¡ 
()جملة For‏ 


يمكن استخدام جملة ۴١١‏ في تنفيذ المثال السابق»ء لطباعة الأعداد من ٠٠١ : ١‏ كما يلي: 


<?PHP 
For ($x = 1; $x <= 100; $x ++) 
{ 
Echo ($X): 
Echo (<Br>'); 


1 = ×5: بداية العداد المتغير ×$ يساوي قيمة البداية .١‏ 

0 => ×5: يتم تنفيذ جمل التكرار طالما أن × أقل من أو يساوي ٠٠٠0‏ وبتوقف التكرار إذا كانت قيمة 
المتغير ×$ أكبر من .٠٠١‏ 

++ ×5: زيادة قيمة المتغير ×$ بمقدار .١‏ ثم يتم تكرار الكود بين القوسين [ ). 


Do ... While (۳) 


ونستطيع أيصا استخدام جملة ها۷ ... 00 لتنفيذ المثال السابقء لطباعة الأعداد من ٠٠١ : ١‏ كما 


«e 


متغير نضع فيه بداية العداد || 


)°۸( الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 


بداية جمل التكرار || ( 
طباعة المتغير والنزول إلى السطر التالي || Echo ($x . "<Br>');‏ 


زبادة قيمة متغير العداد بقيمة $X ++ ; || ١‏ 


نهاية جمل التكرار // } 
شرط التوقف عن التكرار إذا زاد // ;)100 = < While ($x‏ 


متغير العداد عن ۰ ۰ يتوقف. 


خطوات إنشاء صفحة البحث عن مصطلح 


الغرض من هذه الصفحة البحث عن مصطلاح داخل قاعدة البیانات فی المصطاحات التی تم إدخالها فی 


جدول قاعدة البيانات "d٥ ٣2۲۷"‏ باستخدام جملة 51٠٤٥٤‏ والشكل التالى يوضح تصميم صفحة البحث 
فى تطبيق إنشاء صفحات الوبب: 


Design Split Code 


Line 32, Column 1 E” Sv” IE 133 «e | A” H~ CSS21 1198x3917” 


2_ CEE GENA RTE FI ۹ O ON 


شكل )۳١(‏ تصميم واجهة صفحة البحث عن مصطلح 
وفي الشاشة السابقة يمكن استنتاج الآتي: 
٠‏ الصورة 641١8۲‏ والارتباطات بباقي صفحات الموقع في بداية صفحة البحث عن مصطاح. 
عنوان صفحة الويب 'بحث عن مصطاح'. 
تم إدراج ۴١١۳‏ من نافذة 1٠01٥0٨‏ بحيث يحتوي على عناصر التحكم بصفحة البحث. 
٠‏ نص 'مصطلح البحث" ويجواره مريع النص الذي ندخل فيه المصطلح المراد البحث عنه. 
ه زر أمر 'البحث بالكلمة" والمسئول عن تنفيذ كود ۴۳۴ الخاص بتنفيذ عملية البحث عن المصطلح في 
قاعدة البيانات» وهو ما يتطلب قبل ذلك الاتصال بقاعدة البيانات. 
إدراج جدول يحتوي على الصف الأول فقط ويشير إلى عناوين أو رؤوس أعمدة الجدول. 


(°۹) الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 
٠‏ يمكن استخدام إحدى التطبيقات إنشاء صفحات ويب وذلك من خلال كتابة النصوص وادراج أدوات 
التحكم من نافذدة ×0 طامه؟ في مله "وsiه0.‏ وعرض الكود الذي تم توليده في مله مdەC‏ 

بحيث يصبح شكل صفحة الويب على مستعرض الإنترنت للبحث عن مصطاح في قاعدة البيانات كما 


E __ 
08 || EJ http: flocalhost:8080/dictionary/search_term.php 2 + © | ]5[ بحت عن مصطلح‎ : | 


شكل (۳۷) عرض صفحة البحث عن مصطلح على شاشة مستعرض الإنترنت 


٠‏ نتائج البحث تعرض في الجدول من خلال إضافة صف يعرض فيه بيانات كل مصطاح. 
بمكن الاطلا الكود الخاص بانشاء الجدول» وذلك بتحديد الجدول»› د ٥ ML‏ الذی د 
a‏ ج ول؛ و وء و رصن لح 
توليده من خلال الضغط على زر 604۴ وهو: 


الإعلان عن جدول نسبة عرض الجدول ٠٠١‏ من صفحة المستعرض وسمك خط الإطار الذي يحيط 
بالجدول .١‏ 
<table style="width: 100%' border="1'"'>‏ 
۴۶)>: للإعلان عن صف. 
<tr>‏ 
<لا/> المصطلح <لا> 


<ك> الإعلان عن العمود الأول حيث يحتوي على كلمة 'مصطلح"' واغلاقه <ل|/>. 


وهكذا باقي الأعمدة الأريع. 


<كا/> الترجمة <ل)> 
<ك٤/>‏ التعريف <ل)> 
<لا/> الصورة <ل)> 


(۰) الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 

اغلاق كود الصف. </tr>‏ 
مع ملاحظة آنه: سيتم إكمال الجدول من خلال كود ۴۳۴ عند عرض نتائج البحث» وحسب عدد الصفوف أو 
السجلات التي ينطبق عليها شرط البحث. 


1 <html dirz"rt]"™ 

2 <headz™ 

<meta content="tex/html; charset=utf-8" http-equiv="Content-Type" >‏ 3 
<ع[]]/-بحث عن مصطلح حع ]|> 4 
ج 


اضف كود php‏ رقم ۱ 


8 <p class="style1 "™<span lang="ar-eg"><stroو>< “بحث عت مصطلح‎ stron < span p> 
9 <form method="post" action="search term.php"™™ 

10 <div > 

مصطلح البحث 11 

12 <input name="txt search" type="text" style="width: 332px; height: 25px;" = 

13 <input name="submit1" type="submit" value="ةملكلاب "البحٿ‎ styا]e="‎ height: 26px" <&nbs p< br <br> 

14 <form 

15 <br> 

16 <table style="width: 100%0' border=" ]"™ 

ا 17 

<ل]/= المصطج ]2 18 

حل†/> الترجمة حل 19 

حل ]= التعربف حل)]> 20 

8 هة <> الصورة حل 21 

اصف كود pام‏ رگم ۲ و 

3 

24 </table> 

26 <body> 

27 <himlë 


شکل (۳۸) كود ۳۲۷1 الخاص بصفحة البحث عن مصطلح 
(۲) کتابة کود ۴۳٣۴‏ 
وفيما يلي نستعرض كود ۴۳1۴ رقم ١‏ الخاص بإضافة الكود في صفحة 1۴406١‏ وأيصًا كود الاتصال 


e 


بقاعدة البيانات في صفحة C0٣٣6 )1٥١‏ في أول جزء من ا 
include("header.‏ 
include("connectlion.ph‏ 


"}; :Body 
! "7 


شکل (۳۹) کود ۴۳١۲۴‏ الخاص بتضمين صفحتي Connection & Header‏ 


وأيضا كود ۴۳۴ رقم۲» والخاص بالبحث في قاعدة البيانات عن مصطلح معين حيث يتم إضافته ثم 
عرضه بالجدول. 


(٦۱١(‏ الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 


<?php 
ifisset(S POST['submit1'])) 


$txt search=$ POST[ txt search']; 
mysql query("SET NAMES 'utfS'"); 
$sql"select * from terms where term like '%o$txt search%o' ORDER BY term ASC"; 
$query=mysql query($sql) ; 
$num=mysql num rows($query): 
while($row=mysql fetch array($query)) 
1 


$term=$row ['term']; 
$trans=$row ['trans']; 


$defe=$row['defe']; 
$picture=$row ['picture"]; 
echo" at 
<td StermtT/tdz 
<td $transTtdz 
<td? $defec/tdz 
<tdz<input name='pic' type='image' src='$picture' width='830' helght='80' </td> 
ir 
): 


e 


شکل )٤۰(‏ كود ۴۳١۲‏ الخاص بالبحث عن مصطلح 


التحقق من الضغط على زر Su ٣٤‏ 


- اختبار إن كان تم الضغط على زر 'البحث بالكلمة': 
if (isset($_POST["'submit1']))‏ 
{ 
- يلتقط المصطاح أو القيمة التي تم إدخالها في مريع النص على شاشة مستعرض الإنترنت» ويضعها في 
llئnتغzر .Ştxt_search‏ 
Ş$txt_search=$_POST['txt_search'];‏ 
- استخدام دllة mysql_query‏ يساعد في إظهار البيانات على صفحة المستعرض باللغة العربية بشكل 


mysql_query("SET NAMES 'utf8"); 


دالة تنفيذ الاستعلام 

- استخدام جملة 8616٥٤‏ في البحث عن جميع حقول جدول البيانات "6١۳"‏ باستخدام المعامل "٠)أا"‏ وأيصّا 
يتم وضع علامة '%" قبل وبعد المتغير الذي يحتوي على القيمة التي نبحث عنها ۸%١٥4۲هء_×†$%‏ لعرض 
البيانات التي تحتوي على الكلمة بالكامل أو جزء منهاء وترتيب عرضها تصاعديًا وحفظ الناتج في المتغير اهئ؟ 
بینما تشیر 8۷ 0۸2٤۸‏ لترتیب الناتج تصاعدي "dig‏ ceءۃ۸‏ أو تنازنلي .Descinding‏ 


(۲ ً( الصف الثاني الثانوي 


تكنولوجبا المطومات والاتضالات 
$sqlI="select * from terms where term like '%$txt_search%' ORDER BY‏ 


term ASC"; 


- استخدام الدالة yامu_اهول"‏ لحفظ ناتج الاستعلام بالمتغير ا١55‏ في المتغير ۷٥ا .$٩u‏ 
$query=mysql_query($sql) ;‏ 


دالة عد السجلات في الاستعلام 
- وأخيرًا يتم عد السجلات في الاستعلام 6٣ا54‏ بالدالة ۷W5١٣_"uا٣_اهول"‏ وحفظها في المتغير 
$num‏ . 
$num=mysql_num_rows ($query);‏ 
دالة استدعاء سجلات جدول البيانات 
- استخدام جملة التكرار هأ" لتنفيذ الكود بين القوسين † {) حسب عدد السجلات الناتج في الاستعلام 
بحت نتم استدعاء أول سجل بيانات من جدول قاعدة البيانات بالدالة ¥ك١٣۲٣2_٣عc٤۴e_اوmys‏ والانتقال 
بالمؤشر إلى السجل التالي» ووضعها في المتغيرات الأريع التاليةء ويتوقف التكرار عندما لا يتوفر سجل بيانات 
في المتغير .5۲0W‏ 
عرض كل سجل في الاستعلام في صف بالجدول على صفحة مستعرض الإنترنت 
while ($row=mysql_fetch_array ($query))‏ 
{ 
- تخصيیص الأريع قيم بالسجل الأول 0W‏ من ناتج الاستعلام للمتغيرات $defe - $trans ¬ $term)‏ - 
)$pPicture‏ في الأريح جمل التالية: 
$term=$row['term'];‏ 
$trans=$row['trans'];‏ 
$defe=$row['defe'];‏ 


$picture=$row['picture']; 


فمتلا: تم تخصيص قيمة الحقل ]"†٠٠٠'[‏ بالسجل 5٥W‏ للمتغير $0۲۳ وهكذا لباقي المتغيرات. 


- طباعة ناتج المتغيرات الأريعة في صف جديد داخل الجدول السابق على صفحة مستعرض الإنترنت. 
- لكتابة كود 1۲۷1 داخل لغة ۴۳۲۴ نستخدم الأمر (' ')٥۸ءم.‏ 
echo('<tr>‏ 
<td>$term</td>‏ 


تكثولوجيا المعلومات والاتصالات 
<td>$trans< /td>‏ 
<td>$defe< /td>‏ 


<td> <input name='pic' 


type='image' Ssre= '$picture' 
width="'80' height="'80' /< 
</td> 
<tr> ') 
إغلاق القوس ل التالي يعني العودة إلى جملة هاأ"۷ لتكرار ما سبق حتى الانتهاء من جميع السجلات في‎ - 


ناتج الاستعلام .5٩u6 ٣¥‏ 
- إغلاق القوس التالي ‏ يعني إغلاق جملة ۴| في بداية كود ۳4۴. 
نشاط۱: قد یرغب المستخدم في البحث عن مصطلح سبق تخزينه في قاعدة البيانات وعرضه 


على صفحة الويب» تحت اشراف معلمك قم "بإنشاء صفحة البحث عن مصطلح 
"sear ch_ term.php‏ من خلال تنفيذ نشاط ١‏ بكتاب الأنشطة والتدريبات . 


وعند عرض صفحة البحث وإدخال كلمة أو مصطاح مثل كلمة 'كمبيوتر'» كما بالشاشة التالية من خلال 


:localhost/dictionary/search.php jlgizll 


8ے 


08 http://localhost:8080/dictionary/search_term.php 00-C lB بحت عن مصطلح‎ 
۸ 


الرئيسية إضافة مصطلد 
3 س 


مصطلح llبحm super computer)‏ × أ | البحت بالكلمة 


(٦ ٤(‏ الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 
شکل )٤١(‏ استعراض صفحة البحث عن مصطلح على نافذة مستعرض الإنترنت 


= < 
<6 [5 http://localhost:8080/dictionary/search_term.php OA>- CGC | بحت حن مصطلح‎ x hy ag 83 


كمبيوتر ذو إمكانيات هائلة جداً يستخدم لتخزين ومعالجة كم هائل جداً من البيانات و يستخدم على نطاق 
ربط شبكة حاسبات آلية كبيرة جداً على نطاق واسع . 


شكل )٤١(‏ تنفيذ البحث عن مصطلح 


(°) الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 
الموضوع الرابع 
صفحة حذف مصطlح Del_term.php‏ 


فى نهاية الموضوع يتوقع أن يكون الطالب قادرا على أن: 
-١‏ يصمم واجهة صفحة حذف مصطلح. 
۲- ينشىء صفحة حذف مصطلح بکود ا 1۲. 
۳- یکتب كود ۴٣۳٣۶‏ لتضمين صفحتٳy .Header & Connecti0¬‏ 
-٤‏ یتناقش مع زملاءه فی کتابة کود ۴٣۳٢۶‏ لحذف مصطلح. 
-٥‏ يحذف سجل من قاعدة البيانات. 


-٦‏ يتحقق من حذف السجل فى قاعدة البيانات. 


يمكن كتابة عنوان الصفحة وادراج جدول نكتب في صفه الأول عناوين الأعمدة كما يظهر بالشاشة» 
وبالضغط على زر '٣أام8"‏ يمكن عرض الصفحة والكود الذي تم تولده لإنشائها كما يلي: 


1 <html dir="rtl'"> 

2 <head> 

3 <meta content="text'html; charset=utf-8" http-equiv="Content-Typgs 
4 حذقف مصطلح<ع]ان)>‎ >/ [e< 


اضف كود pام‏ رقم ۱ </head>‏ 5 


6 <body> 


8 <form method="post" action="Del Term.php'"™ 
9 >1< 1/-حذق مصطلح‎ 1< 


10 * »« 
11 <table style="width: 100%"> ۲ رهم‎ php اضف کود‎ 
12 <tr > 


<ل)/-المسلسل حل 13 


<ل†/>المصطلح <> 14 
<ل†/>الترجمة دل 15 


حل /التعر يق <> 16 

» » 8 <ل]/-الصور ةحل)> 17 

اصف کود php‏ رفم ۳ <ل†/>الخصائص <ل†> 18 
<tr>‏ 


19 
20 
21 </table> 


4 ه /f‏ و 
اضف کود php‏ رفم ٤‏ ا 24 


25 </html> 


شكل )٤١(‏ كود 1۲۸11 الخاص بإنشاء صفحة حذف مصطلح 
بدراسة الكود السابق يتضح أنه: لا يتضمن أية أوامر جديدة حيث سبق وتناولناها بالشرح» وتشير الأرقام على 
الشاشة إلى الأماكن التي سوف نقوم فيها بإدراج كود ۴۳١۴‏ لإجراء المعالجة وتنفيذ عملية حذف مصطاح من 
جدول قاعدة البيانات. 


وفیما یلی نعرض كود ۴۳1۴ المطلوب إضافته فى الأقسام الأريعة المُشار إليها على الشاشة حيث يمكن 
إضافتها فى الأماكن المحددة بالترتيب. 
(۲) کتابة کود P۴۳4۴‏ 


)١١(‏ الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 


الجزء الأول: حيث يشير الرقم )١(‏ على الشاشة 
<?php‏ 


تضمين صفحتى ١٥له۴1٥1‏ والاتصال بقاعدة البيانات 


include("header.php'); 
include("connection.php"); 
mysql_query ("SET NAMES 'utf8"); 
)6۴١٣۶١ عرض جمیع سجلات جدول البیانات‎ 
وتخصيصها للمتغير ا$5۵.‎ ۲6۲۳٣۶ لعرض جمیع سجلات جدول‎ 51٥٤٤ استخدام جملة‎ 
$sql="select * from terms'; 
$query=mysql_query ($sql); 


$num=mysql_num_rows ($query); 


- الكود السابق سبق تناوله بالشرح. 


الجزء الثاني: حيث يشير الرقم (۲) على الشاشة 
<?php‏ 
عرض عدد المصطلحات في جدول البيانات 
um <|h1>");‏ عدد المصطاحات echo (“<h1>‏ 


- الكود السابق يطبع النص 'عدد المصطلحات" وبجواره ناتج الدالة "۷۶۹_٣01 ۳_ ۲٥۷5‏ التي تم تنفيذها 
علی ناتج الاستعلام y٣ue٩؟$‏ والذدي يمثل عدد السجلات التي تحتوي على كلمة معينة. 


الجزء الثالث: حيث يشير الرفم (۳) على الشاشة 
<?php‏ 


عرض جمیع السجلات على صفحة مستعرض الإنترنت 


- جملة التكرار ٥٠ااطW‏ تطبق الدالة إة١٣٣ة_٣عام؟_اوورص‏ على نتيجة الاستعلام عن كلمة معينة فى 


المتغير 5۹416٣۷‏ للحصول على سجل البيانات الذي ينطبق عليه الشرط وتخصيص الناتج في المتغير .5۲0W‏ 
while($row = mysql_fetch_array($query))‏ 


(٦۷(‏ الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 


{ 
- إدراج جدول على شاشة مستعرض الإنترنت يحتوي على الحقول الستة الموضحة على شاشة المستعرض 
السابقة. 
echo (‏ 
<r >‏ 


<td>$id </td> 
<td>$term </td> 
<td>$trans </td> 
<td>$defe </td> 
إدراج صورة المصطلح بأبعاد معينة للطول والعرض.‎ - 
<td> <input  name-="termp'  type='image' src="'$picture' 


width='80' height='80' /> </td> 


- جعل النص 'حذف'" ارتباط تشعبى» بحيث يستدعى صفحة حذف المصطلح عند الضغط على كلمة 'حذف' 
للمعامل 4ا الذي يحتوي على رقم السجل لا المراد حذفه. 


<td> <a href='delete_term.php?id=$id'> حف‎ </a> </td> 
</tr> 
.عc٣٥ اغلاق کود‎ - 


- إغلاق الحلقة التكرارية ماأا۷. 


غلاق کود ۴۳4۴ // <? 


الجزء الرابع: حيث يشير الرقم )٤(‏ على الشاشة 
<?php‏ 


ا ا E‏ 


- عند الضغط على الارتباط التشعبي 'حذف" يتم استدعاء صفحة الحذف و اء كما يتم التقاط 4| باستخدام 


E] ['‏ 6_$' وبذلك یتم حذف السجل. 
if (isset($_GET['id']))‏ 
{ 


(۸( الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 
- تخصيص جملة اه5 الخاصة بحذف السجل الذي رقمة 0| في متغير حرفي باسم ا#لا54؟. 
$sqldel="delete from terms where id='$_GET[id]";‏ 


- تنفيذد جملة اه5 السابقة» حيث يكون ناتج التنفیذ ۲٣u٥‏ أو ۵ا۴۵ فی المتغیر yا۹ue؟.‏ 


$query=mysql_query($saldel); 
لصفحة الحذف.‎ Rهلأ‎ ٠٠١٥١ إعادة توجيه المستعرض‎ - 


header('"Location: delete_term.php’); 


exit; 


يمكنك استخدام صفحة الويب كواجهة لحذف سجل بيانات مصطلح معين من جدول قاعدة البيانات من خلال كود 
8P‏ » وذلك بتنفيذ النشاطا بكتاب الأنشطة والتدريبات 


(۳) تنفيذ صفحة حذف مصطلح 
عند تحميل صفحة حذف مصطلح معين» يتم عرض المصطلحات وجميع بياناتهاء كما بالشاشة التالية 
من خلال العنوان :localhost/dictionary/del_term.php‏ 


آ کک کا کے | 
چ 11 
AF Za ©‏ حذف مصطلح [=5] أ | C‏ - تمر http://localhost:8080/dictionary/Del_Term.php‏ 6 ا 


الرئيسية إاضافقة مص طلد 
وس ٤‏ کَ 


حذق مصطلح 


عدد الم صطلحات 2 


المسلسل المصطلح تر جمة التحر يف 


Super 5‏ بيوتر كمبيوتر ذو إمكانيات هائلة جد يستخدم لتخزين ومحالجة كم هائل جداً من البيانات و يستخدم حل 
Computer‏ تطاق دولي حيٿ يمڪنه ربط شيكة حاسیات الية ڪبيرة جدا خت تطاق واسح 2 


5% ۴ ۹ | 1 > 
` 
Fr WW‏ ا و هي الترامج التي سمح مالك البرتامج الاصلي "صاحب حى الملكية القكر_ يه" باستخدام بر تامجه ARE‏ ي 
re Ware‏ برامچ مجاتية رر ايز دي حف 


شكل )٤٤١(‏ تنفيذ عملية حذف مصطلح 


)٤(‏ التأكد من حذف السجل في قاعدة البيانات 

يمكن فتح قاعدة البيانات في تبوبب جديد لمستعرض الإنترنت» ومشاهدة السجل المراد حذفه قبل الضغط على 

رابط 'حذف" المصطلح حيث تظهر قاعدة البيانات كما يلي من خلال الرابط التالي: 
"Localhost/phpmyadmin"‏ 


()٦۹(‏ الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 


= Ex 
<® 4, http://localhost:8080/phpmyadmin/tbl_row_action.php#PMAURL-1:sql.php?db= O ¥ @ 


£ localhost:8080 /127.0.0.1 / ... X U کے‎ 
x Find: | Previous Next 2 Options v | 
phpMyAdmin Server: 127.0.0.1 > ® Database: dbdictionary » @ Table: terms 


۵^ al ٣ öã û @ 14 Structure E SQL 4 Search Ed Insert | Export 2} Import  W More 


Recent Favorites 


a emen 


+1 ıı cdcol 


1 
-| | ı| dbdictionary 


_g New SELECT * FROM `terms’ 
| 4 terms 
+l #4 users [_IProfiling [ Inline ] [ Edit ] [ Explain SQL ] [ Create PHP Code ] [ Refresh ] 


ı| information_schema 


J mysql Number of rows: | 25 Filter rows: | Search this table | 


ı| performance_schema 
2 Sort by key: | None 
ıi phpmyadmin 

ıl test + Options 

id term trans defe picture‏ ¥ + آ هه 


ıl webauth 


[] ZA Edit Fé Copy @ Delete 6 Super كمبيوتر نو إمكاتيات هائلة جدآ يستخدم الكمبيوتر‎ pic/super_computer.jpg 
Computer لتخزين ومعال العملاق‎ .. 


9ز.ععc/frام‏ | هى البرامج التي يسمح مالك البرتامج الأصلي برامج مجاتية L] Z Edit 3é Copy @ Delete 9 Free Ware‏ 
..."صاب حق 


1 Ll] Check All With selected: #9 Change @ Delete [@ Export 


Number of rows: 25 Filter rows: Search this table | 


Query results operations | 


شكل )٠٠١(‏ التأكد من وجود المصطلح في جدول قاعدة البيانات قبل حذفه 


وبالضغط على الرابط "حذف" فى صفحة حذف مصطلح يتم حذف السجل المجاور له وتظهر شاشة 


E 
OB http://localhost:8080/dictionary/Del_Term.php A-C 1 ]5[ حنف مصطلح‎ × oke Ge 


عدد المصطلحات 1 


المسلسل المصطلح الترجمة التعريف الصورة الخصائصض 


Free‏ راج هي البرامج التي يسمح مالك البرنامج الأصلي "صاحب حق الملكية الفكرية" باستخدام برنامجه دون NNÊ‏ ا 
Ware‏ مجانية مقابل مادي اح 


شكل )٤١(‏ التأكد من حذف المصطلح على نافذة مستعرض الإنترنت 
وللتأكد من حذف السجل أو بيانات مصطاح معين من قاعدة البيانات» نفتح قاعدة البيانات في تبويب 


جديد لمستعرض الإنترنت» ونتأكد من حذف السجل من جدول "5"٣۲ع)":‏ 


(۰) الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 


SE 


(۷١( 


<© 1 http://localhost:8080/phpmyadmin/tbl_row_action.phpêPMAURL-1:sql.php?db= O > C 1t localhost:8080 / 127.0.0.1 / ... X A Ke He 


x Find: | Previous Next | [F] Options > | 
phpMyAdmin Server: 127.0.0.1 » ® Database: dbdictionary » ğ@& Table: terms 


^ al a ©0) € |] Browse # Structure [j] SQL | Search Fé Insert | Export 2} Import YW More 


SELECT * FROM ` terms” 


[_IProfiling [ Inline ] [ Edit ] [ Explain SQL ] [ Create PHP Code ] [ Refresh ] 


Number of rows: 25 [%]) Filter rows: Search this table 


l+| | ıl performance_schema 


+ Options 
ماه‎ ¥ id term trans defe picture 


O ZA Edit Fé Copy @ Delete 9 Free Ware ةıتlجم ...هي اليرامج التي يسمح مالك اليرتامج الأصلى "ساحب حق | برامج‎ | ما/frعع.ز9‎ 
1 [_] Check All with selected: # Change @ Delete  [@ Export 


Number of rows: 25 | Filter rows: Search this table 


= Query results operations | 


@ Print view @] Print view (with full texts) [ê Export gj Display chart [%5] Create view 


شكل )٤١(‏ التأكد من حذف المصطلح من جدول قاعدة البيانات 


Recent Favorites 
\ığ New 


l#l ig cdcol 
|| J dbdictionary 
‘gj New 
[+l l4 terms 
H4! users 
|+| qı information_schema 


I+ lı mysql 
٣ 1 


0 ı| phpmyadmin 
®- ] test 
I+ J webauth 


الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 
فحة 'تعديل بيانات مصطلح '"Edit_term.php‏ 


فى نهاية الموضوع يتوقع أن يكون الطالب قادرا على أن: 

-١‏ يصمم واجهة صفحة تعديل مصطلح. 

۲- ينفذ كود ۳۲ لإنشاء صفحة تعديل مصطلح. 

.Header & Connection yٳڦتھصئڏ‎ P۹۴ يكتب كود بلغة‎ -۳ 

“٤‏ یکتب کود بلغة ۴۹۶ لإجراء تعدیل بیانات مصطلح. 

-٥‏ يعدل بيانات فى جدول قاعدة البيانات 

-٦‏ يتحقق من تعديل بينات مصطلح فى قاعدة البيانات. 

۷- يحدد العناصر التى يمكن عرضها فى صفحة المساعدة. 

۸- ينشىء صفحة المساعدة ماه. 

الغرض من هذه الصفحة تعديل بيانات مصطاح وتخزين البيانات المُعدلة في قاعدة البيانات» ولإجراء 

تعديل في بيانات مصطلح نحتاج للقيام بما يلي: 

٠‏ عرض المصطاحات. 

٠‏ اختيار المصطلح المراد تعديله. 

ه عرض بيانات المصطاح المراد تعديله في عناصر التحكم على صفحة المستعرض . 

٠‏ إجراء التعديل داخل قاعدة البيانات. 

٠‏ عرض البيانات بعد التعديل. 


)١(‏ تصميم واجهة صفحة التعديل 


نكتب فى صفه الأول عناوين الأعمدة كما يظهر فى الشاشة التالية: 


)۷۲( الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 


ا 7 کا )Cxampp_newMhtdoc\termsupdate_term.php) - Microsoft Expression Web 4 e i r r‏ تحدیت مصطقح [ا 
Edi Vien nsert ernst Tools Table Ste Data View Panels Window Help‏ 


5 1c1u3ڪ‎ SEE N 
31 Ey ("SET NAMES '" OEE 
ا‎ £zom و‎ ١ 


e ET 


شكل )٤۸(‏ تصميم واجهة صفحة تعديل مصطلح 
إجراء المعالجة وتعديل بيانات مصطلح وحفظ التعديلات في جدول قاعدة البيانات يمكن التعرف على 
أماكن إضافة كود ۴۳١۴‏ اللازم لإجراء المعالجةء والموضحة بالشاشة التالية: 


1 <html dir="rtl"> 


2 <head> 
3 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" > 
4 تحدیث مصطلح <ع])ن>‎ >/))[]٥< 


5 </head> 
6 <body> ۱ رگ‎ PHP د‎ 
7 <!-- php code number 1 --> 


8 <1ط/> <م/> تعديل مصطلح < م><1ط>‎ 
9 <!-- php code number 2 --> 
10 <form method="post" action="edit term.php 
11 <!-- php code number 3 --> 


12 <table style="width: 100%" 
13 <tr bgcolor='#3FffOO'> ۳ رفہ‎ P5۶٥ کود‎ 
14 <ل)/>المسلسل<ل)>‎ 


کود P۶٥‏ رقم ۲ >" 


<ل/>المصطلح <ل)> 15 

<ل)/>الترجمة<ل)> 16 

<ل)/>التعريف<ل)> 17 

کود ٥P][۶٥‏ رقم ٤‏ <ل†/>الصورة<ل†> 18 
<إ)/-الخصاتص <ل ]> 19 

20 <tr> 

21 <!-- php code number 4 --> 

22 </table> ٥ہ کود ٥۶م رگہ‎ 
23 <!-- php code number 5 --> 

24 </form> 


' enctype="multiparlform-data'"> 


25 <form method='post' action='edit term.php?id=$ GET[id]&amp:action=$ GET[action 


26 <hr, stylez'colorsorange:maroon;width:1267px'/z 
27 >2< تعدیل بیاتاتف‎ >/2< 


28 <hr style='color:orange;maroon;width:1267px'> 
29 <div > 1٦ رقم‎ P3٣ کود‎ 
30 <!-- php code number 6 --> 

کود P1٣‏ رقم ۷ 


شکل )٤۹(‏ كود 1۲۷1 الخاص بإنشاء صفحة تعديل مصطلح 


32 <!-- php code number 7 --> 


3 
34 <div> 
5 </form> 


الكود السابق لا يتضمن آية أوامر جديدة حيث سبق وتناولناها بالشرح» وتشير الأرقام على الشاشة إلى 
الأماكن التي سوف نقوم بإدراج كود ۴۳١۴‏ فيها لإجراء المعالجة وتنفيذ عملية تعديل بيانات مصطلح في جدول 
قاعدة البيانات» وفيما يلي نعرض كود ۴۳۴ المطلوب إضافته في الأقسام الستة المُشار إليها على الشاشة حيث 
يمكن إضافتها في الأماكن المحددة بالترتيب: 


(۷۳( الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 

ی E‏ 
التالي: 
_ا فشمب سلتا ا 


تحفیق الاتصال بقأاعدة البيانات»› وضبط عرص اللغة العربيةء وتخزين البيانات من جدول قا عدة 


البيانات» ثم نقل ناتج الاستعلام )اsql%( mysql_query‏ ا متغير $٩6۲۷‏ وأخيرًا استخدام 
الدالة ك۷W٥٣_"٣u٣_اوولر"‏ لحصر عدد السجلات المراد تعديلها وحفظها فى المتغير .$5۸11u ٣١‏ 


ER aE E 


البحث عن أول سجل وحفظ بياناته في متغيرات وعرضها في صف جديد من صفوف جدول عرض 

N E E O 
من خلال كود المصطلح 4| يتم البحث عن السجل بالكامل وتخزين بيانات المصطلح في المتغيرات.‎ | ٠ - 

O EON EE E OO EE EG 

فيه وبعد إجراء المستخدم لكافة التعديلات 

OT N TR TT TT TOT OTT 


(۲) كتابة كود الصفحة 


الجزء الأول: حيث يشير الرقم )١(‏ إلى مكان إضافة الكود التالي بعد <رله8> 
<?php‏ 
Include ("header.php');‏ 


- الكود السابق سبق تناوله بالشرح. 
الجزء الثاني: حيث يشير الرقم (۲) إلى مكان إضافة الكود التالي قبل >۴٠۲٣<‏ 


<?php 
include("connection.php"); 


mysql_query("'SET NAMES 'utf8"); 


عرض جمیع سجلات جدول ٥۲۳‏ 


$sqlI="select * from terms'; 


5( الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 


$query=mysql_query ($sql); 


$num=mysql_num_rows ($query); 
2< 


- الكود السابق سبق تناوله بالشرح. 


الجزء الثالث: حيث يشير الرقم (۳) إلى مكان إضافة الكود التالي بعد نص 'عدد المصطلحات"'. 
<?php‏ 
عرض عدد المصطاحات في جدول البيانات 
$num <|h1>");‏ عدد المصطلحات <۸1>')٥c۸ءم‏ 


- الكود السابق يطبع نص عدد المصطلحات وبجوارها قيمة المتغير 511۳ الذي يحتوي على عدد 


الجزء الرابع: حيث يشير الرقم )٤(‏ إلى مكان إضافة الكود التالي قبل إغلاق الجدول <هاطه)|/>. 
<?php‏ 
اكمال عملية عرض جميع السجلات في عناصر التحكم على صفحة المستعرض 
- استخدام جملة التكرار ١أ"‏ لتنفيذ الكود بين القوسين † {) حسب عدد السجلات الناتج في الاستعلام 
بحيث يتم استدعاء أول سجل بيانات من جدول قاعدة البيانات بالدالة yة٣2۲_٣ء٤ه؟_اهور"‏ والانتقال 
بالمؤشر إلى السجل التالي»ووضعها فى المتغيرات الخمبة الثالية وبتوقف التكرار غنكما لا يتوفو سجل بيانات 
في المتغير .5۲0W‏ 
While ($row = mysql_fetch_array($query))‏ 
{ 
$Şid=$row['id"];‏ 
$term=$row['term'];‏ 
$trans=$row['trans'];‏ 
$defe=$row['defe'"];‏ 


$picture=$row['picture']; 


- إدراج صف جديد للجدول على شاشة المستعرض يحتوي على قيمة المتغيرات الخمسة الخاصة بالمصطلح. 
echo (‏ 


(۷°) الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 


<td>$id</td> 

<td>$term</td> 
<td>$trans</td> 
<td>$defe</td> 


<td> <input name='"termp' type="'image'src="'$picture' width="80' 
height='80'/> 
</td> 
ربط النص 'تعديل' بصفحة تعديل مصطلح.‎ - 
<td> <a href='update_term.php?id-=$id'>Jıدعت</a>‎ </td> 


الجزء الخامس: حيث يشير الرقم )١(‏ إلى مكان إضافة الكود التالي بعد إغلاق الجدول <هاطه||>. 
<?php‏ 
تخصيص قيم حقول السجل المراد تعديله عند النقر على رابط 'تعديل' 
- عند الضغط على زر تعديل بجوار سجل معين يتم الحصول على رقمه ۵| باستخدام ['۲]'1۵ 5_6٤۴‏ وذلك 
من خلال جملة ٥٠ا٥5‏ حيث يحفظ الناتج في المتغير ا١ء؟.‏ 
If (isset($_GET["id']))‏ 
{ 
$sqlI="select * from terms where id='$_GET[id]";‏ 
- ومن خلال الدالة را۴ساه_اوولر" يتم البحث عن السجل في المتغير اوك وحفظه في المتغير إامuه؟.‏ 
$query=mysal_query ($sql);‏ 
- ثم يتم تخصيص جميع الحقول في الصف أو السجل المراد تعديله للمتغيرات التالية على الترتيب (لا$ - 


.($picture ¬ $defe - $trans - $term 


$row=mysql_fetch_array ($query); 
$Şid=$row["id']; 
$term=$row['term']; 
$trans=$row['trans']; 


$defe=$row['defe']; 


5( الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 


$picture=$row['picture']; 


الجزء السادس: حيث يشير الرقم )١(‏ إلى مكان إضافة الكود التالي قبل إغلاق ال <٣۲ه۴/>.‏ 
<?php‏ 
إنشاء عناصر التحكم على صفحة المستعرض وضبط بعض خصائصها ووضع القيم في المتغيرات الخاصة 
بالحقول لکل عنصر تحكم مقابل له 
Echo ('‏ 
<br />‏ 


- استخدام الام ٣أ‏ في إدراج عناصر تحكم على شاشة مستعرض الإنترنت تسمح للمستخدم بإدخال البيانات 
الجديدة أو المعدلة للمصطلح» ويحدد في هذا الكود اسم عنصر التحكم ونوعه وعرضه والقيمة التي يحتويها 
من المتغير المناظر له في الجزء الخامس. 


<input name-='"iddata' type='hidden' style= 'width: 482px' value='$id'/> 


نلاحظ آنه يمكن استبدال قيمة عنصر التحكم 'ها$'=هداةا في سطر الكود السابق بالكود 
echo "$id" ?>‏ مم٥‏ > المناظر له في لغة .۴۳٣۴‏ 


nbsp; nbsp; &nbsp;‏ &المصطلح 

<input name="txt_term' type="text' style= ‘width: 482pX' 
value='$term' /> <br/> <br/> 

aتمجرت&‎ nb spP;&nbspم;&‎ nbsp; 

<input name-="trans' type="text' style=  'width: 482px 
value='$trans' /> <br/><br/> 

nbsp; & nbsp, & nbsp;‏ &تعربىف 

<textarea name="TextAreal' style="width: 480px; height: 30pX'> 
$defe</textarea> <br/> 

>br/> الصورة‎ &nbsم;&‎ nbsp; 

<input name="termp' type='image' src='$picture' width="'80' 


height='80' /> 


(۷۷( الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 

<input name='"pic' type='hidden' style="width: 482px 
value='$picture' /> 

<input name=-'filedata' type='"file' maxlength='43'> 


<br/> <br/> <br/> <br/> 


- إدراج زر 'إضافة"' نوعه ٤2‏ ۳طا8 حيث يقوم بتنفيذ الكود فى السطور التالية عند الضغط عليه )عءااح. 


<input name='Submit2' style="width: 76pX' type="submit’ 
value='iilضإ'‎ /> <br/> <br/> 


): 


الجزء السابع: 
إجراء تعديل بيانات مصطلح بكتابة كود مم رقم ۷ 


- الكود التالي يختبر إن كان المستخدم قد قام بالضغط >ءiا٣‏ على زر 'إضافة"' فيتم التحقق ألا من وجود 
مجلد باسم "۴1٥"‏ فإذا لم يكن موجودًا يتم إنشائهء ثم يتم التأكد من وجود قيم في عناصر التحكم وأنها غير 
خاليةء وأيصًا تخزين البيانات الجديدة بعد التعديل فى متغيرات. 


If (isset($_POST['Submit2'])) 
{ 
If (!is_dir('pic')) 
{ 
mkdir(pic); 
} 
$fileName = $_FILES['filedata'"]['name']; 
$ŞtmpName = $_FILES['filedata']['tmp_name']; 
If (!empty ($fileName)) 
{ 
move_uploaded_file($tmpName,'pic/'.$file Name); 
} 
$iddata=$_POST['iddata']; 
Ş$terma=$_POST['txt_term']; 
$transa=$_POST['trans']; 


)۸( الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 
$defea=$_POST['TextArea1'];‏ 
$pic=$_POST['pic'];‏ 
إذا لم يتم تغيير صورة المصطلح تستخدم الصورة السابقة. 
If (!empty($fileName))‏ 
{ 
$picturea="pic/" . $fileName . '" ';‏ 
} 
else{‏ 
$picturea= $pic ;‏ 
} 
mysql_query('SET NAMES 'utf8");‏ 


- الكود التالي لتحديث البيانات في جدول قاعدة البيانات بالقيم الجديدة التي تم حفظها في المتغيرات الأخيرة. 
$sqlI="update terms set term="$terma',trans='$transa' ,defe =‏ 
'$defea’' ,picture='$picturea' where id=-"$iddata' ';‏ 
$query=mysql_query($sql);‏ 
عرض الصفحة بعد التعديل 
If ($query)‏ 
{ 
header('"Location: update_term.php');‏ 
exit;‏ 


} 


2< 


)۳( تنفيذ صفحة تعديل بيانات مصطلح 


تكنولوجيا المعلومات والاتصالات 
عند تحميل صفحة تعديل بيانات مصطلح معين» يتم عرض المصطلح المراد تعديله وجميع بياناته» كما 
بالشاشة التالية وذلك على الرابط hpصlocalhost/dictionary/edit_term.p:‏ 


o |‏ 
ر س | لحدیث مصطلح EJ‏ | ج - 0 http://localhost/dictionary/edit_term.php‏ ك 0 


Ware 9‏ ع۴ برامج مجانية هي البرامج التي يسمح مالك البرنامج الأصلي "صاحب حق الملكية الفكرية" باستخدام برنامجه دون مقابل مادي E‏ تحدیل 


شكل )٠١(‏ عرض صفحة تعديل مصطلح على نافذة مستعرض الإنترنت 
وبالضغط على رابط تعديل يتم تنفيذ كود التعديل وتظهر صفحة مستعرض الإنترنت ويها بيانات 


المصطلح أسفل الشاشة حيث يقوم المستخدم بتعديل بيانات المصطلح ويضغط زر "إضافة" كما يظهر بالشاشة 
التالية: 


(۸۰) الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 


€ 15 http://localhost/dictionary/update_term.php?id=9 >5 E تحدیت مصطلح‎ × | 


تعدیل بيانات 
adlصbطlح Free Ware|‏ | 


ترجمته |برامج مجانية 


التي يسمح مالك اليرتامج الأصلي "صاحب حق 
"a‏ تخدا : دوت مقابل مادى 


شكل )١١(‏ تنفيذ تعديل مصطلح على نافذة مستعرض الإنترنت 


€ ( 5 http://localhost/dictionary/update_term.php 


عدد المصطلحات 1 
المسلسل المصطلح الترجمة ‏ التعريقا ا الصورة الخصائص 


Free Ware 9‏ رمج مجاتية بدون مقايل مادی هي الير امج التي يمح مالك الير تامج 1 لأصلي "صاحب حق الملكية الفكرية" ياستخدام يرتامجه دون مقايل مادي ON‏ تحدیل 


< 2 


شكل )١١(‏ عرض صفحة تعديل مصطلح على نافذة مستعرض الإنترنت بعد تنفيذ التعديل 


)٤(‏ التأكد من تعديل بيانات المصطلح في قاعدة البيانات 


(۸٧)‏ الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 
يمكن فتح قاعدة البيانات فى تبويب جديد لمستعرض الإنترنت بكتابة الرابط التالى 

"hpmyadminم/hostاcaها"‏ فى شريط العنوان» ومشاهدة السجل بعد التعديل حيث تظهر قاعدة البيانات 

ES 
16 û localhost8080 /127001/.. < HE 


2 
P h pP MyAdm in rf Server. 127.0.0.1 » ® Database: dbdictionary » B8 Table: terms 


^SAl G G1) € | | Browse # structure [jÎ SQL 4 Search Fé Insert | Export la} Import Y7 More 


'| | £ http://localhost/phpmyadmin/index.php?token=612df30094b435a02dd: O ” 4 


Recent | Favorites 
—_ğ New 
# (3 cdcol 
-| | ı| dbdictionary 
gq New SELECT * FROM ‘terms’ 

f terms 

# users CIProfiling [ Inline ] [ Edit ] [ Explain SOL ] [ Create PHP Code ] [ Refresh ] 
#| (3 information_schema 
Û ıJ mysql 

J performance_schema 


ıı phpmyadmin + Options 
ج آ هه‎ vw id term trans defe picture 


Number of rows: | 25 [¥] Filter rows: | Search this table 


test 
webauth LL] # Edit 3 Copy @ Delete 9 Free /عام | هى البرامج التي يسمح مالك البرتامج الأصلي "صلحب برامج مجاتية بدون مقابل‎ ۲8.14 
Ware حق مادی‎ 


1 [J] Check All with selected: g#F Change @ Delete [ğ Export 


Number of rows: 25 [¥] Filter rows: | Search this table | 


١ Query results operations | 


û} Print view @ Print view (with full texts) [;ğ Export jj Display chart [¥] Create view 


û Bookmark this SQL query 
http://localhost:8080/phpmyadmin/sql.php?db=dbdictionary&table=terms&token=612df30094... 


شكل )١١(‏ التأكد من تعديل بيانات المصطلح فى جدول قاعدة البيانات 
إنشاء صفحة المساعدة صمhصضم.Help‏ 
عادة ما تتضمن المواقع صفحة مساعدة حيث يمكن إنشائها من خلال النشاط التالي. 


كراسة الأنشطة. نشاط "إنشاء صفحة المساعدة "help.php‏ 


)۸% الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 


الفصل الدراسي الثاني 


الصف الثاني الثانوي 
)( 


تكنولوجيا المعلومات والاتصالات 


الوحدة الرابعة 
تأمين موقع "قاموس مصطلحات الكمبيوتر المصور" 


فى نهاية الوحدة يتوقع أن يكون الطالب قادرًا على أن: 

-١‏ يصمم وسيلة إلكترونية لنشر الوعى بالاستخدام الآمن للاإنترنت 

- يناقش المفاهيم والقضايا المتعلقة بالأمن الفكرى وأمن المعلومات عند استخدام وسائل 
تكنولوجيا المعلومات والاتصالات. 

۳- يمارس أخلاقيات وسلوكيات أحترام حقوق الملكية الفكرية عند التعامل مع المعلومات 
والأجهزة والشبكات وخدمات وتطبيقات الويب. 

-٤‏ يراعى القيم الأخلاقية ويحترم القانون والملكية الفكرية عند استخدام المعلومات والأجهزة 
والشبكات 

-٥‏ يتبع أساليب حماية البرامج التطبيقية من المخاطر التي يمكن ان يتعرض لها 

- يتبع أساليب حماية المواقع وقواعد البيانات من الأنتهاكات التي يمكن ان يتعرض لها 

۷- يوثق المعلومات التي حصل عليها من مصادر المعلومات الإلكترونية 


(۸5( الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 


e 


مقدمة 

عزيزي الطالب والطالبة تعلمت من خلال الفصول السابقة إنشاء موقع ويب باستخدام لغة ۴١۲‏ وقد 
لاحظت أنه يمكن لأي زائر للموقع أن يقوم بإدخال بيانات للموقع (مصطلحات) أو التعديل أو الحذف» وقد سبق 
وشرحنا الموقع بهذا الشكل لإكسابك المعلومات والمهارات الأساسية لتصميم مواقع الويب بلغة م۸٣0‏ . 

إذن لاابد لك من تامين هذا الموقع ان تكون على دراية باساليب الحماية من اختراق مواقع الويب عمومَا 
وهذا ما سوف تتعلمه خلال هذه الوحدة. 
لذلك سوف نقوم خلال هذه الوحدة بانشاء صفحة تسجيل مستخدم جديد وصفحة للدخول وصفحة للخروج وعمل 
الاجراءات اللازمة لحماية قاعدة البيانات ۸3۲۷ ٥0ء‏ أ٥‏ وکل هذا سیتم بشكل مبسط دون الدخول فى اجراءات 
التامين الاحترافية المعقدة. 


وسوف نبداً بشرح مدخل لتامين مواقع الويب 


الموضوع الأول 
مدخل فى تامين مواقع الويب 
فى نهاية الموضوع يتوقع أن يكون الطالب قادرا على أن: 


1- يشرح طرق حماية مواقع الويب. 
۳ یبحث عبر مصادر المعلومات الالكترونية عن طرق وأساليب اختراق مواقع الإنترنت. 


يعتبر تأمين مواقع الوب كهاأوام۷ ءإuءهS‏ ضرورة تفرض نفسها وذلك للحد من اختراقهاء والذى يمكن 
أن ينتج عنه ا 

ا 

٠‏ فقد البيانات والتي قد تكون هامة وتؤدى إلى خسائر مالية لبعض المؤسسات. 

8 سرف انات هام من البوقع: 

ه الحصول على بيانات مؤسسية أو شخصية وما لهذا من أضرار . 

۰ عرض محتوی آخر غير ملائم قد يحتوى على توجهات سياسية أو دينية أو أخلاقية غير مرغوبة. 

٠‏ تشويه صورة المؤسسة أو الشخص صاحب الموقع بشكل عام» وبالتالي يؤدي إلى فقدان ثقة المستخدمين 


والزائرين فيه. 


(۸۰) الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 
مفھوم الاختراق P۴٥۸٥) ٥۸‏ 

اختراق الموقع Website Penetrati0^‏ ويعبر عنه عادة ب Website Hacking‏ حیث یمکن للمخترق 
Hack‏ من الحصول على صلاحية التحكم في إدارة الموقع أو التعامل مع بيانات الموقع بأي صورة (عرض 
- حذف - تعديل ... الخ) من خلال استغلال ثغرة أمنية أو برمجة ضعيفة. 


لذلك يجب أن نكون على دراية جيدة بطرق حماية مواقع الويب والتي تنقسم إلى قسمين هما: 
-١‏ حماية على مستوى الخادم (۲۷۴۲٥ه5)‏ (الخادم المستضيف للموقع :(Website Hosting‏ 
وتكون الحماية هنا مسئولية الخادم أو الجهة المستضيفة للموقع والتي يجب أن تقوم بإعداد خيارات الأمان 
ا که کون اا وا ا لن الاه 


1- حماية على مستوى مطوري الموقع 
وتكون الحماية هنا مسئولية مطوري الموقع والمسئولين عن إدارته مثل: 
ه التحقق من المدخلات قبل تخزينها في قاعدة البيانات. 
٠‏ تشفير كلمات المرور. 
٠‏ إدارة مجلدات الموقع الهامة بكلمات سر قوية. 
٠‏ تحديد صلاحيات للمستخدمين بشكل صحيح. 


بعض احتياطات الأمان للحفاظ على تأمين الموقع 
«١‏ تحديث llبرnlج Keep software up to date‏ 

يجب التأكد من الحصول على التحديثات الخاصة بالبرامج المستخدمة في إدارة و تصميم الموقع سواء 
كانت برامج نظم تشغيل الخادم أو أي برامج تعمل على الموقع. 


١ ۲‏ التعامل مع رسائJ‏ lاlئخطİ Error messages‏ 
من الضرورى التعرف على كافة الأخطاء المحتملة عند نشر الموقع»مثل عدم تحقق الاتصال بقاعدة البيانات 
أو عدم حفظ المصطلح بالجدول بشكل صحيح لذلك يجب الحرص على إخفاء الأخطاء» حيث أن هذه 
الأخطاء تجعل الموقع ضعيف وأكثر عرضه للاختراق ولا يجب ظهورها للمستخدم وانما يتم استبدال الخطاً 
برسالة يتم عرضها للمستخدم برمجياً 

إذن يتم توقع الخطأً والتعامل معه برمجيًا -مثل جملة طع٤4٤‏ ... ر٣آ-‏ من خلال رسائل خطأً معدة 
بعنايه ولا توحى للمستخدم بأي معلومات قد تستخدم في الاختراق مثلا عند وجود خطأً في كلمة السر يمكن 
إعطاء رسالة "اسم المستخدم أو كلمة السر غير صحيحة"'. 

وسوف تتعلم خلال هذه الوحدة مهارة عرض رسالة خطأً برمجيًا فى مواقف مختلفة 


(۸٦)‏ الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 


۳ التحقق من صحة البيانات المدخلة من المستخدم (زائر اlئموقع(‏ ¬ڼValidati Input Data‏ 

عدم التحقق من البيانات المدخلة يعطى الفرصة لذوى النوايا السيئة بإختراق الموقع بإدخال مدخلات 
معينة تتسبب في الاختراق» ولذلك فإن التحقق من صحة البيانات المدخلة من المستخدم من أهم قواعد الحماية 
من الاختراق مثّلا التحقق من أن الحقل يحتوى قيم معينة لا تزيد عن عدد محدد من الأحرف أو التحقق من أن 
الحقل غير فارغء وذلك باستخدام جملة 1۴. 

يمكن التحقق عن طريق أكواد جافا سكريبت حيث يمكن للمخترق تعطيل برمجة الجافا في المستعرض 
ولذلك يجب التحقق مرة أأخرى عند الخادم باكواد م٣م.‏ 


والسبب فی ذلك یرجہ إلی أن کود ۴۳۸۲۶ يتم تنفيذه على الخادم 86١۷۴١‏ وليس على جهاز العميل ٤مذا€.‏ 


0 0 


؛ ٠‏ كلمات المرور sكئكP"assSW0۲‏ 

كلمات المرور يجب أن تكون معقدة نوعًا ما حتى يصعب على المخترق اكتشافها وخاصة كلمة مرور 
الخادم 6۷۴٣‏ وكلمة مرور "1١‏ 4ه الخاصة بالموقع وكلمات مرور قاعدة البيانات. 

بالنسبة لكلمات المرور الخاصة بمستخدمي الموقع يمكن الزام المستخدم على إدخال كلمات مرور ذات 
متطلبات معينة مثل عدد الأحرف لا بقل عن ثمانية - ضرورة وجود حروف كبيرة مع أرقام مع علامات خاصة. 
ویجب حفظ كلمات المرور دائمًا أَبدّا مشفرة ۴٣٥۲۷۲٤8۵‏ باستخدام إحدى أساليب التشفير المتاحة في لغة 
PHP‏ مثل: دالةڌ )Salt Password) S4۸‏ أو دالة .MD5‏ 


(SQL Injection) 5@L Jaج تجنب ادراج/حقن‎ ٠٥ 

هي محاولة المخترق ادراج أو حقن معامل خاص ١ع٤٤١”4١ه۴4‏ داخل جملة اه8 من خلال نموذج 
إدخال البيانات بالموقع ليتم تنفيذها على قاعدة البيانات بدون علم مصممي ومسئولي الموقع. 

أى يتم تغيير جملة ا٩5‏ لتعطى نتائج اخرى يستغلها النخترق استغلال سىء 
مثال: يقوم المخترق بإدخال معامل خاص في جملة 5Q‏ بدلا من إدخال اسم المستخدم بهدف أحداث تعديلات 
غير مرغوبة بجداول قاعدة البيانات. 


XSS (Cross Site Scripting) gêgnئl ٭تجنب کتابة كود عبر‎ ٦ 

يقصد بها إذراج كود في صضفحات الموقعوالخطزرة نكمن في قبول هذا الكود لعذم وجود برمجة تحقق هن 
المدخلات. 
مثال: بفرض وجود نموذج يسمح للمستخدم بإدخال تعليق ٥٥١١۳۴۸۲‏ وعرض التعليقات بعد ذلك بشکل ناجح› 
يمكن للمخترق إدخال كود جافا سكريبت ٤مأ٣٥S‏ ۷4هل متلا وعند إرسال التعلیق إلى الخادم 56۲۷86١‏ يخزن 
هذا الكود في قاعدة البيانات وعند عرضه في صفحة "٠1‏ يتم تنفيذ هذا الكود والذي ريما يعيد توجيه المستخدم 
إلى صفحة أخرى ذات محتوى سىء أو صفحة اصطياد و”أطءاام (أي تحتوى على نموذج إدخال وهمى 


A۷)‏ الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 
للحصول على بيانات هامة من زائر الموقع مثل كلمة سر أو رقم فيزا كارت)»ء ويمكن تجنب ذلك باستخدام 
أسلوب البرمجة المناسب (مثل عدم السماح بأي كود ٤م١٣٥8‏ فى حقل التعليقات). 


۷ رفع الملفات File Uploads‏ 
السماح برفع ملفات إلى موقعك يحتوى على مخاطرة كبيرة يجب تفاديها باتباع الاحتياطات البرمجية اللازمة 
حيث قد يحتوي الملف على كود 5٥۲٥‏ يتم تنفيذه بمجرد فتح الملف على الخادم وبالتالي يصبح موقعك ضحية 
للمخترق» ويتم علاج هذا الاحتمال بعمل اختبار للملف الرفوع فإذا كان ملف صورة مدلا توفر لغة مم العديد 

من أساليب البرمجة للتأكد من هوية الملف. 


SSL.(Secure Sockets Layer) janî طبقة الاتصال‎ ٠۸ 
ط۷6 ومستعرض الإنترنت‎ 586١۷6۴١ هو بروتوكول لتدعيم التعامل الآمن بين خادم الوب‎ 
والتي یمکن‎ Certificate Authoriy (CA), عن طریق توسیط طرف ثالث یسمىی‎ Web Browser 
1۲۲۲۶ ترجمتها جهة التصديق والتي بدورها توفر صفحات آمنة تستخدم بروتوکول 1۲۲۴۶8 بدلا من‎ 

وخصوصًا للمواقع التي بها تعاملات مالية أو نماذج بيانات هامة. 


۹.استخدام تطبيقات تأمين مواقع |لويب Website Security Tools‏ 
بعد الانتهاء من تصميم الموقع يجب اختبار أمان الموقع» والطريقة الفعالة لذلك استخدام تطبيقات أو أدوات 

مان الموقع وتسمی احیانًا اختبار الاختراق ۲5٤9‏ ۸ ٥t1ھاtم۴Pene‏ أو اختبار القلم وا٤۲65‏ ۴6۸ويوجد 
العديد من هذه التطبيقات منها ما هو مجانًا أو مفتوح المصدر» وهذه التطبيقات تقوم باختبار أمان الموقع ضد 
الاختراق باستخدام أكواد وأساليب مشابهة لما يقوم به المخترقون. 
أمثلة من هذه التطبيقات 

-١‏ 08۷458 ويعتبر من أكثر التطبيقات مفتوحة المصدر استخدامًا لاختبار أمان الموقع. 

2 فاا ن ا وهو جيد lختبlر .SQL injection and XSS‏ 


وسوف نبدأً الآن بتأمين موقع قاموس وهو مايتم من خلال: 
-١‏ تسجيل مستخدمين للموقع وذلك بانشاء (صفحة تسجیل مستخدم جدید ۲۴۵.۳۸۲) وحفظ بياناتهم في 
قاعدة البيانات. 
-١‏ ضرورة تسجيل الدخول ١ا6‏ 10 للسماح بعمليات الإدخال أو التعديل أو الحذف وذلك بإنشاء (صفحة 
تسجیل دخول مp٣م.٣iہواs).‏ 
۳- تشفیر ٤۸٥۲۷۲٤‏ كلمة المرور الخاصة بأي مستخدم. 


)۸۸( الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 
٤‏ - عمليات إضافة مصطاح أو تعديل بياناته أو حذف مصطلح يقوم بها فقط زائري الموقع المسجلين 
المسموح لهم بذلك. 


مفهوم :56551٥١‏ تعني 'جلسة" وهو طريقة لتخزين بيانات في متغير داخل ذاكرة الخادم 56۲۷۴8١‏ لمستخدم 
واحد فقط ويكون هذا المتغير متاحًا للاستخدام خلال كافة صفحات الموقع» وذلك طيلة الوقت الذي يظل فيه 
المستخدم يتجول في صفحات الموقع. 

فمتّلا: عند تصميم صفحة دخول مستخدم يتم التحقق من كون المستخدم قد قام بتسجيل دخول من عدمه 
حتى يتم استخدام متغيرات الجلسة كءاطهأ٣‏ ةا ١ه0اووه5‏ خلال صفحات الموقع» وذلك من خلال إضافة 
الكود التالي في بداية أي صفحة بالموقع نريد استخدام متغيرات الجلسة بها. 


<?php 
session start); 
Fs 


شکل )٥٤(‏ كود ۴۳۸۲ الخاص بدء ال ١0أووئم؟8‏ 


الموضوع الثاني 
إنشاء صفحة تسجيل مستخدم جديد 


فى نهاية الموضوع يتوقع أن يكون الطالب قادرًا على أن: 
-١‏ ينشىء صفحة تسجیل مستخدم جدید. 
- يصمم صفحة تسجیيل مستخدم جديد. 
۳- يفرق بین ۴081 & .GET‏ 
-٤‏ شرح احتمالات الخطاً فى إدخال اسم المستخدم وكلمة المرور. 
-٥‏ يشارك زملاءة فی کتابة کود ۴۳١۶۴‏ لإنشاء صفحة تسجیل مستخدم جدید. 


ك يبحث عبر مصادر المعلومات الالكترونية عن طرق تأمين كلمة المرور. 


اجراءات انشاء صقحة تسجیل مستخدم جدید 
أولاً: إنشاء جدول جديد باسم ك١٠ءلا‏ في قاعدة البيانات ٣۲۷‏ اكاك يحتوى على الحقول التالية: 


Table: Users 


)۸٩(‏ الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 


E EE IE E Eh 
1| | meger | 1L Primary _ 


2| enan | Vener O 
3| Pasemord | Verner | 0 | 


شکل )٥٥(‏ تصمیم جدول ١٣مeءU‏ 
إنشاء جدول 5١هد‏ (ككما تعلمت انشاء الجداول بالوحدة الثانية) بقاعدة البيانات yاهہ‏ ءالطل كما يلى: 
تشغبل ھم اہاcontr XAMNP‏ من قائمة ٣٤‏ ھst‏ کما بالشکل: 


JÛ WinRAR ٍ 
J xAuvpP [E] XAMPP Control Panel v3.2.1 [ Compiled: May 7th 2013 ] ION x 
e XAMPP Control Panel v3.2.1 [cone | 


™ Uninstall XAMPP 


10 


a 
Service Module PIDs) Ports) Actions @ Nets 


AAMÎIPP Control Panel 
ıJ XAMPP htdocs folder Apache 1812 80, 43 ی سے س‎ 
Jû xvid MySQL 3436 36 
| 1 
a 1 Fiezila re 
Mercury Admin 
1 2 Tomcat Admin 


XAMPP Installation Directory: "c:\xampp\" صفحة قاعدة البيانات‎ 


50:44 ص‎ ]صain[‎ Checking for prerequisites 


07:50:44 ص‎ ]main[ 


50:52 ص‎ ]Apache] XAMPP Apache Service is already running on port 443 
50:52 ص‎ ]mysqاإ‎ ×XAMPP MySQL Service is already running on port 3306 
7:50:52 ص‎ ]main[ Starting Check-Timer 

2 Control Panel Ready 


07 50 52 ص‎ ]صan[‎ All prerequisites found کی صفحة‎ 
07:50:52 ص‎ ]main[ Initializing Modules 
07:50:52 ص‎ ]Apache] XAMPP Apache Service is already running on port 80 PHPmyadmin 


07:50:52 ص‎ ]main[ 


XAMP control panel Jıغشت‎ (°٦) شكل‎ 


يبدو الجدول کما بالشکل بعد انشاؤه: 


٤ Sever 21.0.0.1 » f Database: tem » pl Table: uses 


E Browse. # Structure. LJ SQL. Û Search FF Insert ê Export E} Import # Privileges. 7 Operations & Tracking. MK 


> Fame Type Collation Attributes Null Default Extra Action 
10 nii) No Mone AUTO INCREMENT JF Change @ Drop / Primary qj Unique E Index FG opatal w lore 
| 2 username varchar i00) uli croatian Cl E û Change @ Drop £2 Primary yj Unique Index [E Spatal w More 
| [3 password varchar 0l) uffd croatlan ¢ LE 4Û Change @ Drop £ Primary qj Unique E Index [E Spatal More 


T OCheckAl Mismected E Bouse Change QDrp PPimay j Uniue Inde 
جدول ١۲٥ءل في قاعدة البيانات‎ )١۷( شكل‎ 


)٠۰(‏ الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 
٠‏ افتح موقع ct!٥ ٣۹۲۷‏ ا0 للاتعديل باستخدام ڊرaliج Expression Web‏ . 
٠‏ أنشء صفحة جدیيدة من النوع ۴٣۴‏ كما بالشكل: 


E Edt View Insert Format Tools Table 


TEE GD reee. 


Site Data View Panels Wind 


lg Open... Ctrl+O 
Recent Files ۽‎ | HTML 
Close E] ASPX 
IE 
E cr+S o 
Save AS... a ree 
Î Save All 
I] Folder 
Import ۴ 


E Lreate from UynamiIc Web Template... 


CT Display in SuperPreview Shift+ F12 3 Lreate from Master Page... 


شكل )٥۸(‏ إنشاء صفحة ۲۳١۲‏ في تطبيق Expression Web‏ 


۰ ادرج ۴٣۲۳‏ وضع علیہ الکائنات sاcع[طہ‏ کما بالشکل: 


شكل )١۹(‏ إدراج نموذج يحتوى بعض عناصر التحكم في تطبيJق Expression Web‏ 


في نافذة خصائص النموذج ۴٠٥١١۳‏ تأكد من تحديد القيمة ۴٠5‏ للخاصية "6٤٣٥١۵‏ كما بالشكل: 


Tag Properties * CSS Properties 


zêf acceptcharset 
8 accesskey 
zê atomicselection 


اق .2 ا 


شکل )٦۰(‏ ضبط خصائص النموذج ۴٥١۳‏ 


)٩۱(‏ الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 
استعرض کود ا۳۲۷ ییدو کما بالشکل: 


<div> 


٠ 
2 <html xmins="http://www.w3.org/1999/xhtml'"™ 
3 <head> 
4 <meta content="en-us" http-equiv="Content-Language'"™ 
5 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" > 
6 تسجيل الدخول<ع][انا>‎ >/ [< 
7 <head> 
8 <body dir="rtl'"> 


m10 

11 <span lang="ar-eg"><strong><span class=" style2">pدختسم‎ Jıجuî&nbsp;‎ دı></span><br‎ class="style2"></strong> 

2 <diy> 

3 <form method="post" action="reg.php'"> 

14 <span lang="ar-eg">مدختسملا اسم‎ nbsp; nbsp: nb sp;>/span< ><span lan g=" en-us" > 

15 </span> <span lang="ar-eg">&nbsp; 

16 <input name="txt_user" style="width: 307px" type="text" e > <br > 

17 &كلمة‎ nbsp; &المرور‎ nbsp; & nbsp: &nb sp: nbsp; >/span> pa 

18 <span lang="ar-eg">& nbsp; <input namez"'txt r&nbsp;&nbsp;&nl 

تأكيد كلمة المرور < إط> <إط> 19 

20 <input name="txt con" style="width: 307px" type="password" ><br > 

4 <strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs} 

22 <input classzjstdge3" name="Submit1" style="width: 149px" type="submit" value="Jıجşuî'"></strong><br‎ > 
23 

24 

ج 

26 div> 

2 a 

28 </html> 


شكل )٦١(‏ كود 1۲۸۷1 الخاص بإنشاء صفحة تسجيل مستخدم جديد 


لاحظ أنه تم كتابة كود ا۳17 بمجرد إنشاء النموذج من خلال نمط التصميم حيث تشير الأرقام إلى 
أماکن کتابۃ P٣۴٤٣‏ . 


الفرق بین ۴٥5۲‏ و 66٤‏ عند إنشاء النموذج :۴٥١٣۳‏ 
فی نافذة خصائص النموذج ۴٥۲۳‏ تم من تحديد القيمة أكهم 
للخاصية ك١ه‏ ط٤6"‏ ركان يمكن تحديد القيمة 6٠٤‏ 


شكل )٦۲(‏ ضبط الخاصية ٥طا٥"‏ للنموذج ۴٥٣٣۳‏ 


واذا نظرت إلی کود ٣٤۳٣١‏ ستجد بدایة ۲۵9 الخاص بالنموذج ۴٥١۳‏ کالاتی 


____ <form (Gethod='post action="reg.php'"> 


يجب معرفة كيف يعمل النموذج ۴٥۲۳١‏ الذى قمت بادراجه: 


)1( الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 
النموذج ۴٠١١۳‏ يستخدم لتمرير أو إرسال كافة بيانات النموذج الموجودة في عناصر التحكم من مستعرض 
الويب إلى الخادم 5۷۴٣‏ ط٥۷‏ ويوجد طريقتين لإرسال بيانات النموذج وهما: 
<form method="GET"> ¬1‏ 
<form method="POST"> -f‏ 


وعند النقر على زر ٣1ا5‏ یقوم بروتوکول ۳1۲۲۴ بطلب ٥5٤‏ ا۸۵۹ لإرسال بیانات النموذج إلى الخادم 
Neb Server‏ ويعتمد الطلب ٤كع۲۴۹u‏ على الطريقة المتبعة إن كانت اه6 م ۷.4 وفي حالة القيمة 


بينما تستخدم 6۴1 في بعض الحالات منها: 
- إذا كانت البيانات غير سرية لأنها تظهر في شريط عنوان صفحة مستعرض الإنترنت. 


يمكنك عزیزى الطالب اكتشاف الفرق بين 6٤1‏ و S1؟۴0‏ عند انشاء نموذج بيانات» وتحديد 
ايهما أفضل لضمان أمان الموقع › وذلك من خلال تنفيذك لنشاط ۲ ٠‏ بكتاب الأنشطة والتدريبات 


ه اضف كود ۴۳۴ مكان الأرقام المشار اليها في نمط كود ا1۲ كما يلي: 


<?php 
session start): 
Fs 


<?php 
include("header.php"); 


(۲ ( الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 


<?php 
include("connection.php"); 


iflisset(S POST['Submit1'])) 


$txt user=$ POST[txt user']; 
$txt pass=$ POSTI['txt pass']; 


$txt con=S POST['txt con']; 


mysql query("SET NAMES 'utfê'""); 
$query=mysql query("insert into users values(",'$txt user", '$txt pass")"); 


شکل )٦۳(‏ كود ۴۳1۲ الخاص بإانشاء صفحة تسجیل مستخدم جدید 
شرح الكود السابق: 


كوڊ PHP‏ رفم php ١‏ 
الإعلان عن استخدام nهاess‏ داخل كود الصفحة. session start);‏ 


مفهوم :58551٥١‏ تعني 'جلسة" وهو طريقة لتخزين بيانات في متغير داخل ذاكرة الخادم 56۲۷۴8١‏ لمستخدم 
واحد فقط ويكون هذا المتغير متاحًا للاأستخدام خلال كافة صفحات الموقع» وذلك طيلة الوقت الذي يظل فيه 
المستخدم يتجول في صفحات الموقع. 

فمتّلا: عند تصميم صفحة دخول مستخدم يتم التحقق من كون المستخدم قد قام بتسجيل دخول من عدمه 
حتى يتم استخدام متغيرات الجلسة كءاطهاأ٣‏ ة۷ ١ادوم‏ خلال صفحات الموقع» وذلك من خلال إضافة 
الكود التالي في بداية أي صفحة بالموقع نريد استخدام متغيرات الجلسة بها. 


<?php 
session start); 
Fs 
5Sموsأ0١ الخاص بدء ال‎ ۴۳١۲ كود‎ )٦٤( شکل‎ 
۲ کود ۴۳۴ رقم‎ 
<?php تضمين صفحة 'مم.۲٥de ھ٥ا" کما سبق شرحه.‎ 
include("header.php'""); 
س‎ 
٣ رقم‎ ۴٣۴ کود‎ 
1 la L8 I. 
include( "connection. php"); متضمين صفحة الاتصال بقاعدة البيانات كما سبق شرحه.‎ 


(٠ ٤(‏ الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 


."Submit1'" 


تستخدم جملة 1۴ للتحقق من الضغط على زر 1)نصطاںu؟‏ حيث 


ifisset(S_POST['Submit1'])) 
يتم تخصيص محتوى عناصر التحكم على النمودج للمتغيرات.‎ 


$txt user=$ POSTI'txt user']; 
txt pass=$ POSTTtxt pass']: 
$txt con=$ POSTI'txt con'l; 


ه استخدام داله ueryه_ا۹وەرص‏ والتي تاد mysql query( "SET NAMES 'uff§") o û‏ 
مشكلة إظهار البيانات على صفحة المستعرض باللغة العريية ٠‏ 


٠‏ من خلال الدالة ۷٥ا‏ اQ_اهوولإص‏ يتم إدراج قيم المستخدم من اسم وكلمة مرور في المتغيرين 
'assم_txt','امtxt_us$'.»‏ وتخصص القيمة ١٠٠‏ للمتغير $۹۷ في حالة نجاح عملية الإدراج في 
جدول قاعدة البيانات. 

j values("",'$txt user", '$txt pass')"); 


PqUuEry=mysql qUuery(""msert into usêf 


ملاحظة:جملة اه5 ١٣ا‏ 56۲٣ا"‏ تستخدم لإضافة بیانات سجل جدید إلى جدول قاعدة البیانات کص٣۶٣.‏ 
#افتح الصفحة في المستعرض ثم جرب الآتي مع فتح جدول 5١٠لا‏ في كل مرة: 
http://localhost/dictionary /reg.php‏ 


إدخال مستخدم جدید وادخال کلمتی المرور Options‏ + 
id username password ٠ ّ [‏ ¥ 74+ 
متطابقتین ثم النقر على زر تسجیل» ثم افتح 


gj Edit kr Copy @) Delete 17 ahmed mon qd 
جدول ك١۴٥ءلا وانظر هل تم إضافة‎ 
f Û CheckAll With selected: ,F Change @ Delete E Export 


البيانات أم لا؟ 


+ Options 
ه4‎ ¥ id username password 


gj Edit ae Copy @ Delete 17 ahmed moon 
gj Edit xe Lopy @ Delete 22 abdallah اہ‎ 


Check All with selected: F Change @ Delete @ Export‏ ا 


)٠٥(‏ الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 


إدخال مستخدم جديد وتعمد إدخال كلمتى 


المرور غير متطابقتين. 


إدخال نفس المستخدم أكثر من مرة. 


+ Options 


Îd username password‏ ¥ ج ]ه4 


17 | ahmed moan 
2A Abdallah 


FE EULEEYy sun 


vvith selected: gF Change @ Delete 


gj Edit E Copy @ Delete 
gî Edi e Copy @ Delete 
gj Edit E Copy @ Delete 
5 Check All 


+ Options 


4] + ¥ id username password 


17 | ahmed MOON 
A” abdallah 
AS | AMSArY Sun 


2 ION 


with selected: gj Change @ Delete 


idl username password 
1F | ahmed NOON 

A abdallah 

A | AMS AY 

2 

25 


Lvith selected g# Change @ Delete 


id username password 
1r | ahmed maar 
AZA abdallah 
2A | AMSArY 
4 
25 
2A0 youUssÎÎ sun_shine 
ZAF  youssif suın_shine 


A0 yoOUSssÎÎ sun_shine 


gË Edit e Lopy @ Delete 
gî Edit E Lopy @ Uelete 
gË Edit FE Copy @ Delete 
gî Edit ke Lopy @ Uelete 


Check All‏ س 
Options‏ + 
+[ 4 
gË Edit FE Loopy @ Delete‏ 
gê Edit e Loopy @ Delete‏ 
gË Edit XE Lopy @ Delete‏ 
gê Ediî E Loopy @ Delete‏ 
gË Edit FE Lopy @ Delete‏ 
E Check All‏ 
Options‏ + 
5 ج ]ه4 
gj Edit Fe Copy @ Delete‏ 
gj Edit ê Copy @ Delete‏ 
gj Edit e Copy @ Delete‏ 
gî Edit e Copy @ Delete‏ 
gê Edit *Èe Lopy @ Delete‏ 
gê Ldit ke Loopy @ Delete‏ 
gê Edit e Lopy @ Delete‏ 
gê Edit ke LOpy @ Delete‏ 


انپا اپا ااا ايا 


3 Check All with selected: g#F Change @ Delete 


شکل (ه (٦‏ احتمالات إدخال اسم المستخدم وكلمة المرور 


من البيانات بجدول ك١٠ءد‏ يتضح أن النموذج ۴٥١۲۳١‏ بهذا الشكل لا يوجد به أي مراعاة لقواعد 


التأمين و ذلك للآسباب التالية: 


۵ حقل 


ه كلمة المرور ظاهرة بالجدول ويجب تشفيرها. 


لمعالجة تلك المشاكل يتم اجراء الآتي: 


ںuںئ٥e٣۶ معالجۂ التکرار فی حقل ۴٥۴۲۸۵۳٥ءں بجدول‎ -١ 
للء٥٣١ بصفحة ]۸۲5۵ لعرض مواصفات الحقول للجدرل‎ 5١ں‎ ctu ۲٤١۴ انقر علی‎ 


(١) 


username‏ بجدول 56۲5ا یقبل التکرار وھذا غیر منطقی فلا یجب وجود أکثر من 


الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 


gî] Server. 127.0.0.1 » @ Database: term » ğ{ Table: users 
[] Browse # Structure [LL] SQL  % Search  #Ê Insert  [@ Export  ë} Import a3 Privileges 4” Operations ® Tracking 


# Name Type Collation Attributes Null Default Extra Action 
O 1id int(11) No None AUTO_INCREMENT #۶ Change @ Drop ,@ Primary [gj Unique {] Index f5: Spatial w 
[J] 2 username varchar(100) utf8_croatian_ci No None J Change @ Drop 2 Primary | gj Unique {*] Index RE Spatial w 
O 3 password varchar(100) utf8_croatian_ci No None #/ Change @ Drop ,@ Primary kique 4] Index f5 Spatial w 


^ Û) Check All With selected: [F] Browse PF Change @ Drop ,@ Primary [Unique #] Index 


انقر لجعل الحقل فريد لا 
ناء التك ار 


شكل )١٦(‏ معالجة التكرار في اسم المستخدم 


بعد النقر على ٠۹١لا‏ وتعنى 'فريد' أي لا يقبل التكرارء فتظهر النافذة كما بالشكل التالي: 


Do you really want to execute "ALTER TABLE users ADD 
WNIQUE( username  j;"? 


OK Cancel 
ا‎ 


شكل (1۷) تحذير بأن يكون اسم المستخدم غير مكرر 'فربد' 


انقر )0 وقد تظهر لك نافذة توضح عدم إمكانية جعل الحقل ٠٠۹٣لا‏ لوجود سجل أو أكثر متكرر بالفعل› 
لذا يفضل ضبط خاصية u٥‏ يارا قبل إدخال البيانات. 


O #1062 - Duplicate entry 'youssif for key 'usemame' 


شكل (1۸) رسالة خطاً عند تكرار اسم المستخدم 


عند نجاح هذه العملية يظهر لك الرسالة التالية ولا تظهر رسالة الخطاً السابقة: 


ALTER TELE “users” ADD UHNIGUE] “username” j; 


)۷( الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 
شكل )٦۹(‏ رسالة تفيد تشغيل جملة اه5 بنجاح 


-التحقق من عدم ترك أي حقل فارغ وأن كلمتي المرور متمائلتين بكود مم والذي ينفذ على جهاز 
:Server‏ 
في هذه الحالة يتم كتابة جملة شرطية بعد تخصيص المتغيرات للتأكد من أن اسم المستخدم وكلمة المرور 
غير فارغين وكذلك كلمتي المرور متمائلتين. 


<?php 
include("connection.php"); 
iflisset($_ POST['Ssubmit1'])) 


1 

$txt user=$ POST[txt user']; 
$txt pass=$ POST[tst pass']:; 
$tt con=$ POST[txt con']; 


if(Stxt user l= "" f $x pass l= "" && $list pass == $txt con) 


mysql query("SET NAMES 'utif8'"); 
$query=mysql query("insert into users values(",'$txt user’,'$txt pass")™; 
ا‎ 


else 
{ 
echo "label id='Label1' style='color: FFFOO00O;font-size: large; "zp 
;"اع طاوا/>يجب ادخال اسم المستخدم وكلمة المرور وأن تكون كلمتى المرور متكافائين‎ 
1 

1 


Ns 


شكل (۷۰) كود ۴۳١۴‏ الخاص بالتأكد من عدم ترك أي حقل فارغ وتطابق كلمة المرور وتأكيدها 
٠‏ التعبير الشرطي مع جملة ۴| 
if($txt user l= "" && txt pass l= "" && $txt pass == $txt con)‏ 
أى إذا كان المتغير ٣56ا_×$‏ لا يساوي سلسة حرفية فارغة و إذا كان المتغير ككتم_٤×)$‏ لا يساوى 
سلسة حرفية فارغة و إذا كان المتغير ككةم_>ا$ يساوى المتغير ١٥ء_٤×ا5»‏ يصبح الناتج النهائي عں٣)‏ 
حيث يجب التحقق من الثلاثة شروط المذكورة لكي يكون الناتج النهائي 1۲16 وفي حالة عدم تحقق 
شرط أو أكثر منهم يصبح الناتج النهائي هكاه۴. 
٠‏ أحفظ الصفحة. 
٠‏ حمل الصفحة في مستعرض الإنترنت» ادخل بيانات مستخدم جديد مع ترك أحد الحقول فارغة .. 
سجل ملاحظتك .فى كتاب الانشطة والتدريبات صفحة 
سجل دخول مرة أخرى مع تعمد عدم مطابقة كلمتي المرور.. 


۳- التحقق من أنه ڌ تم تسجيل البيانات في الجدول بنجاح 


(۸)( الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 
في هذه الحالة يتم اختبار المتغير 5۹16۲۷ والذي يكون ناتجه ۲۲1۵ عند تنفيذ جملة اه5 بنجاح. 


<?php 
include("connection.php"); 
iflisset(S POST['Submit1"])) 
{ 


$txt user=$ POST['tkt user]; 

$txt pass=$ POST[txt_pass']; 

$txt con=$ POST['tt con']; 

if($txt user 1= "" && $txt pass l= "" && $txt pass = $txt con) 


mysql query("SET NAMES 'utfS'"); 
$query=mysql query("insert into users values(",'$txt user','$txt pass')"); 
1f(Squery) 


echo("<label id='Label1' style='color: #FF0000:font-size: large; >جlجiب اتم تسجیل البيانات‎ bط‎ e; 
ا‎ 


else 


1 
lz label");‏ يتم اضافة لبنت echo("<label idi='Label1' style='color: #FF0000:font-size: large;‏ 
ا 
ا 
else‏ 
1 
echo "label id='Label1' style='color: #FF0000;font-size: large;‏ 
;"1ع طاو[ />يجب ادخال اسم المستخدم وكلمة المرور وأن تكون كلمتى المرور متكافاتين 
ا 
ا 


شکل )۷١(‏ كود ۴۳١۴‏ الخاص بالتأكد من تسجيل في جدول قاعدة البيانات بنجاح 
٤‏ تشفير كلمة المرور 
يوجد العديد من الأساليب لتشفير كلمة المرور ومثال على ذلك يمكن استخدام الدالة 105 وهي أحدى 
الدوال التي تستخدم في التشفير. 
lلدélI MD5(Message-Digest Algorithm)‏ 


تقوم هذه الدالة بإرجاع ناتج تشفير سلسة حرفية بأسلوب ۱۲۸ بت. 


<?php 


$str = "rmoon'"":; 


6d4db5ff0c117864a02827bad3c361ا9‎ 


(۹) الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 
افتح كود صفحة ۲۴9.٥۸٥‏ واكتب ما هو مشار إليه على الشكل التالي في الأماكن الموضحة بدائرة 
گل الکو د التالے۔ 


تخصيص ناتج الدالة M55‏ 
للمتغير sئوم_)×)$‏ 


$txt user=$ POST[txt user]; 


$txt pass=$ POST[tt pass']; 


$txt pass=md5($txt pass); 


تخصيص ناتج الدالة 
M5‏ للمتغير 


$txt con=$ POST[tt con']; 


$txt con=md5($txt con); 


وبالتالي يصبح محتوى المتغير 55ةم_>$ والمتغير $×٤_٥٥١‏ كلمة المرور المشغفرة 
احفظ الصفحة ثم حمل الصفحة فى المستعرض. 

- سجل أكثر من مستخدم جدید. 
- افتح جدول .1156۲S‏ 


+ Options 
ج | ه4‎ ¥ id username password 
gj Edit Ee Lopy @ Delete 30  Sama_Elansary qle2bfabfeddce3UcSSdbb09efS1aa 
gî Edi E Lopy @ Delete 31 Fatma_Abdallah 19fFIA239c0c309c AfEGESAA2Odcf4f 
gj Edit E Lopy @ Delete 32 Heba_Youssif edda2dfc16323303fbad4fco6fOd411 7c 
gî Edit E Loopy @ Delete 33 Youssif_ Abdallah  #fd3e4da2ebGffSefSccaf346214ad919 
E- Check All with selected: gF Change @ Delete ğã Export 


شكل (۷۲) عرض كلمة المرور بعد التشفير في جدول قاعدة البيانات 


وهناك طرق أخرى لتامين كلمة المرور أكثر من ذلك» ويمكنك عزيزي الطالب البحث عنها عبر 
الإنترنت. 
كراسة الأنشطة: نشاط 'التعلم الذاتي' 
كراسة الأنشطة: نشاط "بدا من حيث انتهى الأخرون' 


(۰۰) الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 
الموضوع الثالث 
تصميم صفحة تسجيل الدخول اوها والخروج مام.utمہوsi‏ 


فى نهاية الموضوع يتوقع أن يكون الطالب قادرا على أن: 
-١‏ يصمم صفحة الدخوJ Expression Web ءlدiتulڊ login‏ . 
۲- يتعاون مع زملاءة فى كتابة كود ٣١M 8۴۴٢۲‏ لإنشاء صفحة تسجيل الدخول. 
-٣‏ يصمم صفحة تسجيل خرو Expression Web ءlدختulڊ Sig nout‏ . 


ثالثاً: تصميم صفحة الدخول Expression Web مlدختulڊ login‏ 

فكرة هذه الصفحة هي: 

-١‏ إدخال اسم المستخدم وكلمة المرور والنقر على زر دخول. 

البحث في جدول 156۲5 عن اسم المستخدم وفي حالة وجوده يتم مقارنة كلمة المرور التي أدخلها المستخدم 

۳- في حالة التأكد من اسم المستخدم وكلمة المرور» يتم تخزين اسم المستخدم فى المتغير الخاص بالجلسة 
0Q‏ . وعرض رسالة ترحيب باسم المستخدم. 

٤‏ تأثر صفحات أخرى بالدخول مثل صفحة إضافة مصطلح وصفحة التعديل وصفحة الحذف حيث يجب 
تعديل الكود بهم بحيث يكون الأضافة والتعديل والحذدف بعد قيام المستخدم بتسجيل دخول. 


.Signin.phP ۃulڊ وانشئ صفح‎ Expression We افتح برنامج‎ e 
وضع عليه عناصر التحكم كام٣†ہهع كما بالشاشة التالية:‎ ۴١۲۳ ادرج نموذج‎ 


ر 4 )C:xampp\htdocsl\terms\signin.php) - Microsoft Expression Web‏ تسجیل الدخول 


it View Insert Format Tools Table Site Data View Panels Window He 


Select CSS style to apply: 


Clear Styles 


H~ 
شكل (۷۳) تصميم واجهة صفحة تسجيل دخول مستخدم‎ 


(۰۱) الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 


لاحظ الارتباط التشعبى 'مستخدم جديد"' والمرتبط بصفحة مستخدم جدیيد ۲٠۴9۵‏ السابق إنشاؤها حيث تبدو 
نافذة الكود كما بالشكل التالى: 


(۰۲) الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 


0 


Site View signin.php > 


© 1 

2 <html xmlins="http://www.w3.org/1999/xhtml'"> 

3 <head> 

4 <meta content="en-us" http-equiv="Content-Language'"™ 
5 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" > 
6 


<ع][از/>تسجيل الدخول<ع][انا> 


1 </head> 
8 د الخا‎ 
a ص‎ PHP کو‎ 
10 <?php header بڊص4‎ 
11 include("header.php"); 
ı12 


13 <span lang="ar-eg"><strong><span class="style2">pدختسم <صھمو/> تسجيل دخول‎ 
14 <br class="style2"> 
15 <strong> 
16 <>diy<> 
17 <form name="admin" action="signin.php" method="post" 
18 enctype="multiparlform-data'">™ 
19 اسم المستخدم‎ &enbsp;& nbsp; >input name=" user" type="text" ><br><br><br > 
20 &كلمة المرور‎ nbsp; nbsp: nbsp: >input name=" pass" type="password" ><br> 
21 <br> 
22 <input name="submit1" type="submit" value="Jgخد''">‎ 
23  &nbsp;&nbsp;&nbsp:&gbsp; <a href="reg.php'"> <ھ/< مستخدم جديد‎ 
</form> 
25 


/div> 
27 

28 </html> 
Design Split Code 


شکل )۷٤(‏ کود 1۲۷1 , ۴۳۲ الخاص بإنشاء صفحة تسجيل الدخول 


(۰۳)( الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 
اضف كود ٥۸م‏ التالى مكان الأرقام المشار إليها فى شاشة الكود السابقة: 


<?php 


session start(); 


<?php 
include("connectlon.php"); 
mysql query("SET NAMES 'utf®'"); 


اختبار الثقر علی زر ن ظن$ ا ا 


$usern=$ POST['user']: 
$passw=$ POST['pass']: 
$passw=md5( $passw); 


التأكد من إدخال الاسم وكلمة المرور ) "" if($usern !=—= "" && $passw I=‏ 


ZI 


$sqi"select * from users where username='$usern' && password= '$passw' "; 


Squery=mysql query(SsqD; 
$num=mysql num rows($query): 


if ($num == 1) 


$row=mysql fetch array($query); 

$ SESSION[username' j=$row ['username']; 
header("Location: index.php"); 

exit: 


شکل )۷١(‏ كود ۴۳١۲‏ الخاص بإنشاء صفحة تسجيل الدخول 


شرح الكود السابق 
کود ۴۸۴ رقم ١‏ 
في بداية صفحة تسجيل الدخول نجد الكود الذي يُعلن عن بدء جلسة ١٠٥أءءه8‏ للمستخدم» وذلك لأن 
أي مستخدم جديد للموقع ينبغي أن يدخل باسم مستخدم ۵۸۳۴٣۵۲ءل‏ وكلمة مرور 0۲۵ Wءءھ٥.‏ 
کود P۳٣۴‏ رقم ۲ 


(۰۶( الصف الثاني التانوي 


تكنولوجيا المعلومات والاتصالات 
٠‏ أول سطرين لتضمين صفحة الاتصال بقاعدة البيانات والتي سبق شرحهاء وأيصا استخدام دالة 
۷s ۹1_Que¥‏ والتی تساعد فى حل مشكلة إظهار البيانات على صفحة المستعرض باللغة العربية بشكل 


تستخدم جملة ۴| في اختبار الضغط على زر أ٣‏ طن بالدالة 56كا فإذا وعند تحقق الشرط في جملة ۴|: 
ينفذ سطري الكود التاليين لجملة ۴|» حيث يتم إنشاء المتغير ١6۲ءلا$‏ ويخصص له اسم المستخدم الذي تم 
إدخاله في عنصر التحكم ١#ءلا‏ على ال ۴١۳۳١‏ وأيصًا يتم إنشاء المتغير 5Wء4‏ $۴ ويخصص له كلمة 
المرور التي تم إدخالها في عنصر التحکم sئھ۴‏ على ال ۴٥۴۳‏ 


لاحظ إضافة السطر ;(45857ط$ )1d5=سءع4ط$‏ لتشفير كلمة المرور المدخلة بواسطة المستخدم حتى 
يتم مقارنتها بما هو مخزن بجدول 58۲5ل المشفرة أيسا. 

ه وفي جملة ۴| الثانية يتم التحقق من أن عنصري التحكم اسم المستخدم وكملة المرور غير خاليين» حيث 
نسأل في جملة الشرط ۴| من خلال شرط مركب إن كان $56۲١‏ لا يساوي "= =!" قيمة فارغة أي ااu١‏ 
وكذلك أن متغير كلمة المرور ليس خاليًاء مع ملاحظة أنه تم استخدام المعامل '"&&" والذي يعني AND‏ 
للريط بين شرطين» فإذا تحقق الشرطين معًا وكانت قيمة كل من اسم المستخدم وكلمة المرور غير خاليين 
اا آي فيهما قيمة» فيتم تنفيذ الكود التالي: 

ه من خلال جملة ٤١٠٠1ه5‏ يتم البحث في جدول 8۲٥5لا‏ في قاعدة البيانات عن اسم المستخدم الذي تم إدخاله 
في عنصر التحكم على ۴١١۳۳‏ ووضع في المتغير ١۲٥ءلا$‏ في حقل ١٠4۳٣١۵۲ءلا‏ في قاعدة البيانات› 
وأيصًا يتم البحث عن كلمة المرور التي تم إدخالها في عنصر التحكم على ۴١۲۳‏ ووضعت في المتغير 
$passw‏ في حقل ۴55۷0۲١‏ في قاعدة البيانات» ويتم وضع نتيجة البحث في المتغير ا554 شريطة 
أن يكون الاسم وكلمة المرور معًا. 

.؟٩uماإ يتم تخصيص ناتج تنفيذ الدالة yرام۹u_اهوءل على المتغير ا۹ء للمتغير‎ ٠ 
الدالة ۷W5٥٣_"نا"_اوول[ تستخدم في تحديد عدد السجلات التي تم الحصول عليها في الدالة ووضعها‎ 
.551 ٣ في المتغير ا۹ء$؛ ويتم تخزين نتيجة الدالة في المتغير‎ 

ه في الجز الأخير من صفحة تسجيل دخول المستخدم» يتم اختبار المتغير "$110 إذا كان قيمته تساوي ١‏ 
أي أن هناك مستخدم واحد فقط يوجد اسمه وكلمة المرور في جدول 5١#ءلاء‏ فإذا تحقق الشرط ووجد سجل 
واحد فقط يتم تنفيذ الدالة إة١٣2۲_٣ء٠_اهوولإ"‏ وتحول نتيجة جملة ا5۹ إلى مصفوفة يكون نتيجتها قيم 
سجل تخزن في المتغير $۲0٥۷‏ وتنقل المؤشر على السجل التالي في جدول 5١٥5لا‏ في قاعدة البيانات. 

ثم يتم تخصيص اسم المستخدم من حقل ه٠۳ه۵٣6۴۲ءلا‏ في قاعدة البيانات» للمتغير 1۷56۲۸۵۳6۴ في 
الجلسة ١٥أءءه5,‏ وبالتالي يمكن مقارنتها والتحقق منها في أي صفحة من صفحات الموقع» ويطبعه على 
مستعرض الإنترنت» ثم يتم الانتقال إلى الصفحة الرئيسة "م٣م.×ه۵"!ا'»‏ ويتم الخروج من جملة ۴| بالكود 
×٤‏ ثم يتم إغلاق جمل ۴| الثلاثة بالأقواس الثلاثة إ. 


)٠۰٠١(‏ الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 
رابعا: تصميم صفحة تسجيل الخروج صsignout.php‏ ڊulتخدlء Expression Web‏ 
تعتمد فكرة صفحة تسجیيل خروج على تخصيص القيمۂ ااںu" <?php‏ 
إلى المتغیر $_SESS0N[USERNAVE‏ واعادة التوجيه session_start);‏ 
SESSION usermame'] = "";‏ $ 


إلى الصفحة الرئيسة .۳P‏ >۴ | وھو ما یظھر في header( "Location: index.php"):‏ 
exit:‏ 


الكود: 
Is‏ 


(١ ۰ ٦(‏ الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 
الموضوع الرابح 
إجراءات تأمين الموقع 


فى نهاية الموضوع يتوقع أن يكون الطالب قادرا على أن: 
-١‏ يجري عدة تعديلات فى الموقع 
۳- يوظف جملة الشرط ۴| فى التحقق من تسجيل الخروج 


١-اضافة‏ كود بدء الجلسة فى بداية كل صفحة يستخدم بها الجلسة. 


<?php 
session start); 


ر 


- تعديل الكود في صفحة ۲ءل2dم"‏ 


شكل )۷٦(‏ صفحة ه٠1‏ المراد إضافتها إلى صفحة تسجيل دخول 


المطلوب اختبار هل تم تسجيل الدخول أم لا 

في حالة تسجيل الدخول يتم اتی 
- إضافة عبارة مرحبًا بكم ويجوارها "اسم المستخدم'. 
N e‏ 


في حالة عدم الدخول يضاف ارتباط تشعبي باسم تسجيل الدخول 


(۰۷) الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 


site View header.php* x  headerc.php 


f <html dir="rt]"y>y 

2 <head> 

E <meta content="textf/html; charset=utf-8" http-equiv="Content~Type "7 

E </head> 

ES <body> 

3 di r> 

l<iımga height="1é61" src=" images/banner. JP" width=" 1Zé67"z 

< diwz 

SS <dir style="width: 1256px; text-align: right" ج‎ 

N knbsp; <a href="indezx .php"* iim îj Jl </a> 

ef nbsp; nbsp; nbsp; &nbsp; &nbsap; &nbasp; <a href="input term terms .php"*&nbap; glطbaas‎ aiĞlLal 

I <faranbsp; nbsp; &nbsp; &nbsp; &nbsp; &nbsp; nbsp; <a href="search text.php"?خglط¦bصaa‎ je تazulJl‎ </ar 
E inbsp; nbsp; nbsp; &nbsp; &nbap; &nbasp; &nbap; <a href="delete term.php"*alha as dãis»</ar 

ES nbsp; tnbap; nbsp; tnbap; tnbap; tnbap; nbsp; <a href="update tern. php"?zجlطbÜصans»‎ JلJيدعت‎ 
و‎ href="Help.php"*3i1e lms </a> 

16 
YI <div 
E <body? 
3 

Eu] </html> 


اضف كود php‏ ھا 


r 7 
Design Split Code 


شكل (۷۷) التعديل في صفحة ٣م‏ ل2م 


<?php 
1f (#5 SESSION [ 'username'"] = ""} 
1 


echo (" <a href="'signin.php"'?<span lang="'ar-eg'>Jgëıll Juzwa®/span> </a>") ; 


echo ("ëtnbsp; nbsp; tnbsp; nbsp; énbsp; tnbsp; nbsp; "); 
ععطo ر "مستخدم عبر مسحل"‎ 
$ SESSION [ "username" ] = ""; 
ا‎ 
else 


echo (" <a  href="signout .php"' <span lang="ar-eg'?zgjal| Jızma</span?</a>") ; 


echo ("ëtnbsp; nbsp; nbsp; nbsp; nbsp; tnbsp; nbsp; "); 
echo ("p5 ."ا‎ " " „, § SESSION[ "username" ]) ; 
ا‎ 


ا 


شكل (۷۸) إضافة الارتباط التشعبي 'تسجيل دخول"' من خلال كود ۴۳١۲‏ في صفحة ٣مdجمم:‏ 


الجملة الشرطية ۴| 


(۰%) 


if(@$_SESSION['username'] == "")‏ 
تتعامل لغة ۴۳۲۶ مع العلامة @ على أنها متغير» لو كان بدون قيمه لا يظهر رسالة خطأ. 
تذكر من قواعد لغة ۴۳۲ وضع علامة $ قبل اسم المتغير. 
70ء _$ متغير في ذاكر جهاز الخادم للتحقق من كون المستخدم سجل دخول أم لا. 
الشرط الخاص بجملة ۴| هو: " = =['۴٣۳ه"٣٣هءن"]‏ أي هل اسم المستخدم يساوي 'ااu"‏ آي 
خالي لم يدخل فيه بيانات وهناك حالتين إما أن يتحقق الشرط أو لا يتحقق: 
ه فإذا تحقق الشرط "۲65": يجعل عبارة 'تسجيل دخول" ارتباط تشعبي لصفحة التسجيل المسماة 
'hPم.ninواء"‏ ويترك عدة مسافات ويطبع على صفحة المستعرض أن 'المستخدم غير مسجل 
وىجعل متغير essi0°؟‏ قيمته .$_SESSION['username'] == ""; :دgكلlı Null‏ 


الصف الثاني التانوي 


تكنولوجيا المعلومات والاتصالات 
د وإذا لم يتحقق الشرط '٥'‏ أي أن ١٠اه‏ يحتوي على قيمة أي اسم للمستخدم: يجعل 
عبارة 'تسجيل الخروج" ارتباط تشعبي لصفحة الخروج والمسماة "م م.٤uام٣واء'‏ ويترك عدة 
مسافات ويطبع على صفحة المستعرض رسالة ترحيب» 'مرحبًا بكم" ثم يترك عدة مسافات»› 
ويكتب اسم المستخدم الذي قام بإدخاله في متغير ١10ء55‏ وذلك بالكود: 
$_SESSON[ username");‏ . ' '" .'مرحبا بکم') 
لاحظ أنه يمكن استخدام كود K٤1٥‏ لطباعة أكثر من ثابت أو متغير على صفحة المستعرض وذلك 
وأخيرا تم إغلاق أو وضع نهاية جملة ۴| '"[' وعلامة النهايية للجز الأول 
echo ("</div>");‏ ولاحظ إضافة E٥۲٥‏ لان كود ۷أ الخاص بلغة 1۲k‏ داخل کود ۴۳۸۲٥‏ وأخیرًَا نھاية 
کود PH۴٣‏ "<?'. 
۳-تعديل الكود في صفحة ءعtةلمں‏ 
اضف جملة شرطية في المكان المشار إليه لاختبار هل تم الدخول أم لا وفي حالة عدم تسجيل الدخول نعيد 
التوجيه إلى صفحة تفيد بعدم وجود صلاحية التعديل والخروج من الصفحة للتعديل. 


<?php 

session start); 

7> 

<html dir="rtl'"> 

<head> 

<meta content="text'html; charset=utf-^" http-equiv="Content-Type" > 
تحدیث مصطلح <ع])ز>‎ >/))]< 

</head> 


<body> 


<?php 


include("header.php"); 


ا 


>1١<>م‎ < <صم/> تعدیل مصطلح‎ >/١< 
<?php 

include("connection.php'"); 

mysql query("SET NAMES 'utf^'"); 
$sql="select * from terms"; 
$query=mysql query($sqD; 
$num=mysql num _ rows($query); 


شكل (۷۹) إضافة كود ۲۳١۲‏ في صفحة التعديل يمسح للمستخدم الذي سجل دخول أن يقوم بالتعديل 


والجملة الشرطية كما يلى: )"" == i($ SESSION ['username']‏ 


{ 
header "Location: ask to sign in.php");‏ 
exit;‏ 
1 
شکل (۸۰) إضافة كود في صفحة التعديل يعرض صفحة تطلب من المستخدم تسجيل دخول 
تعنی اذا لم یتم تسجیل الدخول يتم توجیه المستخدم إلى صفحة تسمی م۸ م. ۸_٣‏ واء_٥ہ)_ask)kء‏ ثم 
الخروج من کود الصفحة. 

(١ ۰۹٩(‏ الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 


صفحة م٣م.”أ_”واو_ه)_٤وه‏ هى صفحة عادية تعرض رسالة توجه المستخدم لما يجب القيام به كما يلى: 


الدخول الان انقر هنا 


0 
sienin.bhp 


reg.php صفحة‎ 


٤‏ -يتم إضافة نفس الجملة الشرطية السابقة فى بداية كود ۴۳١۴‏ فى صفحة إضافة مصطلح وأيصّا فى 


)۱١(‏ الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 
ألمو صوع الخامس 
تأمین قاعدة البیانات اړئر" 
فى نهاية الموضوع يتوقع أن يكون الطالب قادرا على أن: 
-١‏ يذكر طرق تأمين قاعدة البيانات 
۲- يناقش اكبر عدد من الأفكار لتأمين قواعد البيانات. 
۳- يعدل اسم المستخدم وكلمة المرور فى قاعدة البيانات. 


وذلك بعمل التعديلات اللازمة في الموقع بما يتوافق مع أسلوب تسجيل دخول مستخدم كما يلي: 


عند تثبیت ااهاہ! برنامج ۸۷۴۴× يتم إنشاء مستخدم باسم ۲٠١١‏ بدون كلمة مرور وهذا يعني السماح 
للجميع بالتعامل مع قاعدة البيانات ويجب عمل كلمة مرور لتأمين قاعدة البيانات. 


تذكر الكود بصAéaa connection‏ 


<?php 
$username="root": 


$password=""; 
$server="localhost": 


$connect=mysql connect("$server", "$username", "$password"™); 
if ($connect) 


$select=mysql select db("$database") or diٍع("تانايبلا ;"هناك مشكلة فی قاعدة‎ 
else 

1 

"لم يتم ال“تصسال بقاعحدة البيانات"')0طءع 

1 


شکل (۸۱) كود ۶۳١۶‏ فى صفحة الاتصال بقاعدة البيانات بتأمين ضعيف 


حمل صفحة التأمين بكتابة العنوان التالى فى صفحة مستعرض الإنترنت : 
http: //localhost/securlit‏ 


)۱۱۱١(‏ الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 


XAMPP for Windows 


XAMPP SECURITY 


(Requests allowed rom localhost only] 


This page gives you a qUIck overview about the security status of your XAMPP Installation. (Please continue reading after the table, j 


These XAMPP pages are accesslble by network for everyone UNSECURE 
Every XAMPP demo page you are right now locking at is accessible for everyone over network, Everyones who knows your IF address can see these pages, 

The MySQL admin user root has NO password UNSECURE 
Every local user on Windows box can access your MySQL database with administrator rights, fou should set a password, 

PhpMyAAdmin Is free accesslble by network UNSECURE 
PheMyAdmin is accessible by network without password, The configuration 'httpd' or "cookie" in the "config.irc.php" can help. 


A FTP server Is not running or I5 blocked by a firewall! 
A FTP serwer is not running or is blocked by a firewall 


The green marked points are secure; the red marked polnts are definitively unsecure and the yellow marked polnts couldn't bej 
because the sofware to check Isn't running). 


ieckeyg (for example 


To fix the problems for mysql, phpmyadmin and the xampp directory simply use 


ity.php <= [allowed only for localhost] 


لاحظ الحالۂ ٥إ‏ ںcمیہں‏ لکل بند 


انقر للوصول إلى صفحة تغيير كلمة المرور 


شكل (۸۲) تغيير اسم المستخدم كلمة المرور الخاصة بقاعدة البيانات 


ومن خلال الصفحة بالشكل التالي« اكتب كلمة المرور الجديدة وتأکيدھا« ثم انقر زر Password Changing‏ 


SecuırIty console MySQL & XAMPP directory protection 


MYSQL SECTION: "ROOT" PASSWORD 
MYSQL SuperlUser: root 


New password: 
Repeat the new password: 


PhpMyAdmin authentification: fttp Û cookie 1# 
---- SeECUrItY risk! =--- 
Safe plain password in text file? 


(File: Ciixamppisecurityisecurity\mysgqlrootpasswd. txt) 


Password changing 


شكل (۸۳) إدخال كلمة مرور جديدة وتأكيدها لقاعدة البيانات أكثر أمانًا 
بالطبع يجب تعديل كلمة المرور فى صفحة م۸ م.٣٥connec†i‏ كما یلی: 


(۱۲( الصف الثاني الثانوي 


تكنولوجيا المعلومات والاتصالات 


$password="HowTo Deslen php web site"; 
والتي يفضل أن تكون كلمة مرور صعبة ومعقدة حيث لن يتم استخدامها إلافي صفحة‎ 
وبالتالى يكون من الصعب تخمين أو معرفة كلمة المرور على المخترق.‎ connection .مhPم‎ 


(۱۱۳)( الصف الثاني الثانوي 


